@crewlethq/ui 0.27.0 → 0.28.0

package/dist/styles.css

@@ -1704,7 +1704,27 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArrangeGroup-SHFHA7BE.css */
+/* ArrangeGrid-XM4ZFTED.css */
+/*
+ * 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);
+}
+
+
+/* ArrangeGroup-GY5YMP6E.css */
 /*
  * ArrangeGroup: a titled band of blocks. The hue is the header's; the body
  * stays the page's ground, so the cards inside keep their own contrast.
@@ -1839,11 +1859,10 @@ button.crewlet-account-row__who:focus-visible {
   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;
 }
@@ -4761,7 +4780,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-JYW4X5ZL.css */
+/* Charts-RY4JN5FC.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -5197,11 +5216,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   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;
@@ -9703,7 +9734,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DatasetSource-47LBDMPR.css */
+/* DatasetSource-XFPZBRXL.css */
 /*
  * DatasetSource: one entry of a dashboard's Sources rail. The title and its
  * source kind, the definition, then where the rows stand, how many there are
@@ -9767,7 +9798,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;
@@ -9799,9 +9832,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);
 }
@@ -15152,7 +15191,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Note-RT4L6VUT.css */
+/* Note-ONSKKTOA.css */
 /*
  * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
  */
@@ -15196,6 +15235,16 @@ svg.crewlet-datetime__chevron {
   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;
@@ -26678,7 +26727,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* WidgetFrame-4EFJOJMW.css */
+/* WidgetFrame-LRZIL62O.css */
 /*
  * WidgetFrame: one figure on a dashboard. A title row, the figure filling the
  * height the host's frame gives it, and the citation line at the foot.
@@ -26688,24 +26737,44 @@ svg.crewlet-time-window__tick {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
   min-width: 0;
   height: 100%;
   min-height: 0;
-  padding: var(--spacing-3) var(--spacing-4);
+  /* THE CARD'S OWN INSET, set on each part rather than on the frame, so a
+     flush figure can give up its sides while the title and the citation keep
+     theirs. */
+  padding-block: var(--spacing-4);
+  /* THE CARD RECIPE: the ground, the hairline and the corner every card on a
+     board stands on, so a figure and the cards around it are one object. */
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  background: var(--color-surface-elevated);
+  background: var(--color-surface-subtle);
+  /* Measured by its own width, for the citation below. */
+  container: crewlet-widget-frame / inline-size;
+}
+
+.crewlet-widget-frame__head,
+.crewlet-widget-frame__body,
+.crewlet-widget-frame__cite {
+  padding-inline: var(--spacing-4);
 }
 
 .crewlet-widget-frame__head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-2);
   min-width: 0;
 }
 
+/*
+ * THE TITLE IS THE FIGURE'S ONLY NAME, so it is read whole: it takes a second
+ * line before it gives up a word, and only a title longer than two lines ends
+ * in an ellipsis. Cut at one line, a frame three columns wide named "Tokens,
+ * last 14 days" as "Tokens, last 14 da".
+ */
 .crewlet-widget-frame__title {
+  display: -webkit-box;
   flex: 1;
   min-width: 0;
   margin: 0;
@@ -26714,15 +26783,21 @@ svg.crewlet-time-window__tick {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
 }
 
+/* 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 {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--spacing-1);
+  height: calc(var(--font-size-sm) * var(--font-line-height-snug));
 }
 
 .crewlet-widget-frame__body {
@@ -26732,6 +26807,24 @@ svg.crewlet-time-window__tick {
   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. */
+.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);
+}
+
+/* A stat tile drawn flush as the figure stands on the frame's inset; its own
+   is for a column of a StatGroup, and inside a frame it doubled the space
+   around the label and under the value. */
+.crewlet-widget-frame__body .crewlet-statcard--flush {
+  padding: 0;
+}
+
 .crewlet-widget-frame__blocked {
   display: flex;
   align-items: flex-start;
@@ -26754,10 +26847,16 @@ svg.crewlet-time-window__tick {
   min-width: 0;
 }
 
+/*
+ * ONE LINE: the dataset's title gives up its tail before the time leaves the
+ * line. Allowed to wrap, a long title was cut and its "as of" fell to a line
+ * of its own that began with the separator.
+ */
 .crewlet-widget-frame__cite-text,
 .crewlet-widget-frame__cite-button {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  max-width: 100%;
   align-items: center;
   gap: 0 var(--spacing-1);
   min-width: 0;
@@ -26789,6 +26888,8 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-widget-frame__source {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
@@ -26802,7 +26903,34 @@ svg.crewlet-time-window__tick {
   margin-inline-end: var(--spacing-1);
 }
 
+.crewlet-widget-frame__when {
+  flex: none;
+  white-space: nowrap;
+}
+
+/*
+ * A NARROW FRAME STACKS ITS CITATION: the dataset's title on one line and
+ * when it was true under it, with no separator to begin a line. Side by side
+ * in a frame three columns wide, the title kept four letters ("Open w...").
+ */
+@container crewlet-widget-frame (width < 18rem) {
+  .crewlet-widget-frame__cite-text,
+  .crewlet-widget-frame__cite-button {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .crewlet-widget-frame__source {
+    max-width: 100%;
+  }
+
+  .crewlet-widget-frame__when::before {
+    content: none;
+  }
+}
+
 .crewlet-widget-frame__stale {
   display: inline-flex;
+  flex: none;
   color: var(--color-feedback-warning-ink);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.27.0",
-    "@crewlethq/tokens": "0.27.0",
+    "@crewlethq/icons": "0.28.0",
+    "@crewlethq/tokens": "0.28.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/WidgetFrame-4EFJOJMW.css

@@ -1,127 +0,0 @@
-/*
- * WidgetFrame: one figure on a dashboard. A title row, the figure filling the
- * height the host's frame gives it, and the citation line at the foot.
- */
-
-.crewlet-widget-frame {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  min-width: 0;
-  height: 100%;
-  min-height: 0;
-  padding: var(--spacing-3) var(--spacing-4);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface-elevated);
-}
-
-.crewlet-widget-frame__head {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-  min-width: 0;
-}
-
-.crewlet-widget-frame__title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-widget-frame__actions {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  gap: var(--spacing-1);
-}
-
-.crewlet-widget-frame__body {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-  overflow: auto;
-}
-
-.crewlet-widget-frame__blocked {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-2);
-  margin: 0;
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-  line-height: var(--font-line-height-normal);
-}
-
-.crewlet-widget-frame__blocked-glyph {
-  display: inline-flex;
-  flex: none;
-  padding-top: 2px;
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-widget-frame__cite {
-  display: flex;
-  min-width: 0;
-}
-
-.crewlet-widget-frame__cite-text,
-.crewlet-widget-frame__cite-button {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0 var(--spacing-1);
-  min-width: 0;
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
-  line-height: var(--font-line-height-snug);
-}
-
-.crewlet-widget-frame__cite-button {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-xs);
-  background: none;
-  font: inherit;
-  font-size: var(--font-size-xs);
-  text-align: start;
-  cursor: pointer;
-}
-
-.crewlet-widget-frame__cite-button:hover .crewlet-widget-frame__source {
-  color: var(--color-text-primary);
-  text-decoration: underline;
-}
-
-.crewlet-widget-frame__cite-button:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-.crewlet-widget-frame__source {
-  overflow: hidden;
-  color: var(--color-text-secondary);
-  font-weight: var(--font-weight-medium);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
-.crewlet-widget-frame__when::before {
-  content: '\00b7' / '';
-  margin-inline-end: var(--spacing-1);
-}
-
-.crewlet-widget-frame__stale {
-  display: inline-flex;
-  color: var(--color-feedback-warning-ink);
-}

package/dist/chunk-63WJLRB2.js

@@ -1,24 +0,0 @@
-import { cx } from './chunk-ODEQTPFM.js';
-import './Note-RT4L6VUT.css';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var Note = forwardRef(function Note2({ tone = "amber", align = "start", size = "md", className, children, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cx(
-        "crewlet-note",
-        `crewlet-note--${tone}`,
-        align === "center" && "crewlet-note--center",
-        size === "lg" && "crewlet-note--lg",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-});
-
-export { Note };

package/dist/{chunk-UFKUWVMV.js → chunk-2HIOJ4YZ.js}

@@ -1,6 +1,6 @@
-import { Button } from './chunk-OG6CL3EB.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
 import { usePopupLayer } from './chunk-R25RGPUB.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-KEKAD3BZ.css';

package/dist/{chunk-F4DPAJCN.js → chunk-I3KKZ2O3.js}

@@ -1,7 +1,7 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { useLayerContainer } from './chunk-HMPFGIWM.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-XOSV6FAH.css';

package/dist/{chunk-FW7HN6AP.js → chunk-LDJ3J4TQ.js}

@@ -1,6 +1,6 @@
 import { Callout } from './chunk-SVSCLHHI.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useEffect } from 'react';
 import { EyeGlyph, UserGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-KZOGQXSP.js → chunk-OJ45PPCV.js}

@@ -1,6 +1,6 @@
 import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.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';

package/dist/{chunk-LREN6TUG.js → chunk-UZ6MA2V6.js}

@@ -1,9 +1,9 @@
 import { Select } from './chunk-FC4YTTFJ.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Input } from './chunk-6QFAK2WV.js';
-import { Popover } from './chunk-BWRGFKJP.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-T763GLXH.css';

package/dist/{chunk-WG5WUFBX.js → chunk-Y5NQ2LMS.js}

@@ -1,5 +1,5 @@
-import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Popover } from './chunk-BWRGFKJP.js';
+import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';