@crewlethq/ui 0.27.1 → 0.28.0

package/dist/WidgetFrame-LRZIL62O.css

@@ -0,0 +1,206 @@
+/*
+ * 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-3);
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  /* 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-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: 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;
+  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);
+  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 {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  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;
+  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;
+}
+
+/*
+ * 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: nowrap;
+  max-width: 100%;
+  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 {
+  flex: 0 1 auto;
+  min-width: 0;
+  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__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/dist/{chunk-MLT2HBPN.js → chunk-77DRMDXR.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Charts-JYW4X5ZL.css';
+import './Charts-RY4JN5FC.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useId } from 'react';
 
@@ -502,7 +502,12 @@ function StackedColumns({
   return /* @__PURE__ */ jsxs(
     "figure",
     {
-      className: cx("crewlet-stacked-columns", fill && "crewlet-stacked-columns--fill", className),
+      className: cx(
+        "crewlet-stacked-columns",
+        fill && "crewlet-stacked-columns--fill",
+        !headed && "crewlet-stacked-columns--headless",
+        className
+      ),
       style: rows === void 0 ? void 0 : { gridTemplateRows: rows },
       children: [
         headed ? /* @__PURE__ */ jsxs("div", { className: "crewlet-stacked-columns__head", children: [

package/dist/{chunk-BQYQWJPK.js → chunk-AAOH2P6Y.js}

@@ -2,7 +2,7 @@ import { Skeleton } from './chunk-W5J7R5EB.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './WidgetFrame-4EFJOJMW.css';
+import './WidgetFrame-LRZIL62O.css';
 import { useId } from 'react';
 import { ClockGlyph, LockGlyph, CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -21,6 +21,7 @@ function WidgetFrame({
   source,
   onCite,
   actions,
+  flush = false,
   headingLevel = 3,
   now,
   labels,
@@ -59,7 +60,12 @@ function WidgetFrame({
     "section",
     {
       ...rest,
-      className: cx("crewlet-widget-frame", `crewlet-widget-frame--${source.status}`, className),
+      className: cx(
+        "crewlet-widget-frame",
+        `crewlet-widget-frame--${source.status}`,
+        flush && "crewlet-widget-frame--flush",
+        className
+      ),
       "aria-labelledby": titleId,
       "aria-busy": source.status === "loading" || void 0,
       children: [

package/dist/{chunk-35XVR5JQ.js → chunk-B4EBHPK3.js}

@@ -1,6 +1,6 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArrangeGroup-SHFHA7BE.css';
+import './ArrangeGroup-GY5YMP6E.css';
 import { useId } from 'react';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -66,7 +66,7 @@ function ArrangeGroup({
           "div",
           {
             id: bodyId,
-            className: cx("crewlet-arrange-group__body", bodyClass),
+            className: cx("crewlet-arrange-grid", "crewlet-arrange-group__body", bodyClass),
             style: { ...bodyStyle, ["--crewlet-arrange-columns"]: columns },
             hidden: collapsed,
             ...body,

package/dist/chunk-CJKMURZO.js

@@ -0,0 +1,31 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Note-ONSKKTOA.css';
+import { forwardRef, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Note = forwardRef(function Note2({ tone = "amber", align = "start", size = "md", heading, headingLevel = 3, className, children, ...rest }, ref) {
+  const headingId = useId();
+  const Heading = `h${headingLevel}`;
+  const named = heading !== void 0 && heading !== null && heading !== false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...named ? { role: "region", "aria-labelledby": headingId } : {},
+      className: cx(
+        "crewlet-note",
+        `crewlet-note--${tone}`,
+        align === "center" && "crewlet-note--center",
+        size === "lg" && "crewlet-note--lg",
+        className
+      ),
+      ...rest,
+      children: [
+        named ? /* @__PURE__ */ jsx(Heading, { id: headingId, className: "crewlet-note__heading", children: heading }) : null,
+        children
+      ]
+    }
+  );
+});
+
+export { Note };

package/dist/{chunk-INTEH4F3.js → chunk-CT4EZF62.js}

@@ -7,9 +7,9 @@ import { ChangeMark } from './chunk-YEKYVJQR.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-NHBP2XS5.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
 import { Avatar } from './chunk-5OM447RW.js';
-import { Menu } from './chunk-UFKUWVMV.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Menu } from './chunk-2HIOJ4YZ.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SheetGrid-J3TKKXZL.css';

package/dist/{chunk-SVW3VG72.js → chunk-EBJREOKS.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-F4DPAJCN.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
+import { Modal } from './chunk-I3KKZ2O3.js';
 import { Checkbox } from './chunk-7T42VQQT.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-UFKUWVMV.js';
+import { Menu } from './chunk-2HIOJ4YZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
@@ -516,6 +516,7 @@ var DataTable = ({
     if (leftover >= 0 && leftover <= 1) return;
     const next = { ...columnWidths2 };
     const widthOf = (key) => next[key] ?? minColumnWidth2;
+    const floorOf = (key) => Math.max(minColumnWidth2, columns2[key]?.minWidth ?? 0);
     visibleDataKeys.forEach((key) => {
       next[key] = widthOf(key);
     });
@@ -529,10 +530,10 @@ var DataTable = ({
       pool.forEach((key, idx) => {
         const current = widthOf(key);
         const rawShare = idx === pool.length - 1 ? outstanding - moved : Math.round(outstanding * (current / poolTotal));
-        const clamped = Math.max(minColumnWidth2, current + rawShare);
+        const clamped = Math.max(Math.min(floorOf(key), current), current + rawShare);
         moved += clamped - current;
         next[key] = clamped;
-        if (clamped > minColumnWidth2) roomLeft.push(key);
+        if (clamped > floorOf(key)) roomLeft.push(key);
       });
       if (moved === 0) break;
       outstanding -= moved;

package/dist/{chunk-GTLJXJ3U.js → chunk-HCKJGBQH.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-F4DPAJCN.js';
+import { Modal } from './chunk-I3KKZ2O3.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-6QFAK2WV.js';

package/dist/{chunk-5OY4LJFH.js → chunk-HVNTQ36V.js}

@@ -1,9 +1,9 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-F4DPAJCN.js';
+import { Modal } from './chunk-I3KKZ2O3.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Input } from './chunk-6QFAK2WV.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';

package/dist/{chunk-3D7PSL2L.js → chunk-JODJS7MR.js}

@@ -1,5 +1,5 @@
-import { Note } from './chunk-63WJLRB2.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-KZOGQXSP.js';
+import { Note } from './chunk-CJKMURZO.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-OJ45PPCV.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-ZLPDINSM.css';

package/dist/{chunk-URUGEAFB.js → chunk-JQLTG4KH.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Modal } from './chunk-F4DPAJCN.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
+import { Modal } from './chunk-I3KKZ2O3.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/chunk-QBA5B2Z5.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeGrid-XM4ZFTED.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ArrangeGrid({ columns = 12, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-arrange-grid", className),
+      style: { ...style, "--crewlet-arrange-columns": columns },
+      ...rest,
+      children
+    }
+  );
+}
+
+export { ArrangeGrid };

package/dist/{chunk-RSC7UJCR.js → chunk-S6VG5ZFZ.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-KZOGQXSP.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OJ45PPCV.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-OJRDEVHV.js → chunk-VOMYRJV5.js}

@@ -1,14 +1,14 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-SVW3VG72.js';
-import { DateTimePicker } from './chunk-WG5WUFBX.js';
+import { DataTable } from './chunk-EBJREOKS.js';
+import { DateTimePicker } from './chunk-Y5NQ2LMS.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-UFKUWVMV.js';
+import { Menu } from './chunk-2HIOJ4YZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-BFQK7CYJ.js → chunk-WENCSQ47.js}

@@ -1,5 +1,5 @@
 import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Menu } from './chunk-UFKUWVMV.js';
+import { Menu } from './chunk-2HIOJ4YZ.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-ZZDY4XL7.js → chunk-ZB5O3ELS.js}

@@ -2,7 +2,7 @@ import { Tag } from './chunk-GFV4LJHH.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DatasetSource-47LBDMPR.css';
+import './DatasetSource-XFPZBRXL.css';
 import { useId, Children, isValidElement } from 'react';
 import { ClockGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -66,18 +66,18 @@ function DatasetSource({
       rows !== void 0 && !blocked && status !== "loading" ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
         /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__rows", children: text.rows(rows) })
-      ] }) : null,
-      refresh ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        " ",
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__refresh", children: [
-          /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
-            text.refresh,
-            " "
-          ] }),
-          refresh
-        ] })
       ] }) : null
-    ] })
+    ] }),
+    refresh ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__refresh", children: [
+        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+          text.refresh,
+          " "
+        ] }),
+        refresh
+      ] })
+    ] }) : null
   ] });
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/{chunk-L2OQRPXJ.js → chunk-ZR5VN5IV.js}

@@ -1,4 +1,4 @@
-import { ConfirmModal } from './chunk-F4DPAJCN.js';
+import { ConfirmModal } from './chunk-I3KKZ2O3.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import './LinkInterstitial-ET4MSVSV.css';

package/dist/generated/index.d.ts

@@ -5,6 +5,7 @@ export * from '../Announcer/index.js';
 export * from '../AppShell/index.js';
 export * from '../ArrangeBoard/index.js';
 export * from '../ArrangeFrame/index.js';
+export * from '../ArrangeGrid/index.js';
 export * from '../ArrangeGroup/index.js';
 export * from '../ArrangeList/index.js';
 export * from '../ArtifactCard/index.js';