@crewlethq/ui 0.76.0 → 0.77.0

package/dist/chunk-HUIYSNBS.js

@@ -0,0 +1,65 @@
+import { Checkbox } from './chunk-GKWZTTFV.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CheckGrid-B3SRTHOJ.css';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MOST_COLUMNS = 6;
+function CheckGrid({ label, rows, columns, stateOf, onChange, className }) {
+  const base = useId();
+  const rowId = (r) => `${base}-row-${r}`;
+  const noteId = (c) => `${base}-note-${c}`;
+  const layout = columns.length > MOST_COLUMNS ? "many" : String(columns.length);
+  const notes = columns.flatMap((column, c) => column.disabledReason ? [{ column, c }] : []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-check-grid", `crewlet-check-grid--${layout}`, className),
+      style: { ["--crewlet-check-grid-columns"]: columns.length },
+      children: [
+        /* @__PURE__ */ jsxs("div", { role: "table", "aria-label": label, className: "crewlet-check-grid__table", children: [
+          /* @__PURE__ */ jsxs("div", { role: "row", className: "crewlet-check-grid__head", children: [
+            /* @__PURE__ */ jsx("span", { role: "cell", className: "crewlet-check-grid__corner" }),
+            columns.map((column) => /* @__PURE__ */ jsxs("span", { role: "columnheader", className: "crewlet-check-grid__column", children: [
+              column.media ? /* @__PURE__ */ jsx("span", { className: "crewlet-check-grid__media", children: column.media }) : null,
+              column.label
+            ] }, column.value))
+          ] }),
+          rows.map((row, r) => /* @__PURE__ */ jsxs("div", { role: "row", className: "crewlet-check-grid__row", children: [
+            /* @__PURE__ */ jsxs("span", { role: "rowheader", className: "crewlet-check-grid__name", children: [
+              row.media ? /* @__PURE__ */ jsx("span", { className: "crewlet-check-grid__media", children: row.media }) : null,
+              /* @__PURE__ */ jsx("span", { id: rowId(r), children: row.label })
+            ] }),
+            columns.map((column, c) => {
+              const state = stateOf(row.value, column.value);
+              const refused = column.disabledReason !== void 0 && state === "unchecked";
+              const box = `${base}-box-${r}-${c}`;
+              return /* @__PURE__ */ jsx("span", { role: "cell", className: "crewlet-check-grid__cell", children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: box,
+                  size: "sm",
+                  className: "crewlet-check-grid__box",
+                  label: column.label,
+                  "aria-labelledby": `${rowId(r)} ${box}-label`,
+                  "aria-describedby": refused ? noteId(c) : void 0,
+                  checked: state === "checked",
+                  indeterminate: state === "mixed",
+                  disabled: refused,
+                  onCheckedChange: (next) => onChange(row.value, column.value, next)
+                }
+              ) }, column.value);
+            })
+          ] }, row.value))
+        ] }),
+        notes.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "crewlet-check-grid__notes", children: notes.map(({ column, c }) => /* @__PURE__ */ jsxs("li", { id: noteId(c), children: [
+          column.label,
+          ": ",
+          column.disabledReason
+        ] }, column.value)) }) : null
+      ]
+    }
+  );
+}
+
+export { CheckGrid };

package/dist/{chunk-2STOSJT3.js → chunk-HYGCGN37.js}

@@ -9,7 +9,7 @@ import { Tag } from './chunk-VERJCAJ4.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { Avatar } from './chunk-KTIQSSME.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Menu } from './chunk-KNAHKQD4.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';

package/dist/{chunk-6THG44LI.js → chunk-KQQWGWCC.js}

@@ -1,7 +1,7 @@
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { Count } from './chunk-MLDTLZAO.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Menu } from './chunk-KNAHKQD4.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-OCGIQGYJ.js → chunk-KXYZ5XS2.js}

@@ -1,7 +1,7 @@
 import { Modal } from './chunk-C667GCU7.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { SegmentedControl } from './chunk-BKXUZCZX.js';
-import { FormField, Input } from './chunk-FB3TCNQP.js';
+import { SegmentedControl } from './chunk-WOTGQVHZ.js';
+import { FormField, Input } from './chunk-6Q7RW2JJ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useState } from 'react';
 import { ClockGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-TPIMOGOZ.js → chunk-LJSQT5NJ.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-PLL7ZJHY.js';
-import { FormField, Input } from './chunk-FB3TCNQP.js';
+import { FormField, Input } from './chunk-6Q7RW2JJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {

package/dist/{chunk-HZDI2CCS.js → chunk-LXB4CABM.js}

@@ -2,8 +2,8 @@ import { Modal } from './chunk-C667GCU7.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Checkbox } from './chunk-GKWZTTFV.js';
+import { Menu } from './chunk-KNAHKQD4.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-LCZULGMB.js → chunk-MKWURHR5.js}

@@ -1,4 +1,4 @@
-import { Checkbox } from './chunk-LMQG3VPG.js';
+import { Checkbox } from './chunk-GKWZTTFV.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-FQI62PIZ.js → chunk-ODAZIKZF.js}

@@ -1,6 +1,6 @@
 import { Note } from './chunk-5SZGKSGL.js';
-import { CanvasToolbar, toolForKey } from './chunk-KL6A7JGH.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OBPINJNO.js';
+import { CanvasToolbar, toolForKey } from './chunk-SQ7GYC4K.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-EMCVX5FY.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasBoard-U6LR5F6H.css';

package/dist/{chunk-I3G5FJ54.js → chunk-P34YWECQ.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-BKXUZCZX.js';
+import { SegmentedControl } from './chunk-WOTGQVHZ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-HCXPRQVR.css';

package/dist/{chunk-X5FKORDM.js → chunk-PD2GOJ5V.js}

@@ -1,17 +1,18 @@
-import { Stepper } from './chunk-RJWO2PC5.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
+import { Stepper } from './chunk-RJWO2PC5.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SetupWizard-2SUMQEWU.css';
+import './SetupWizard-Y2PFPBCZ.css';
 import { useId, useRef, useState, useEffect, useCallback, createElement } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var LABELS = {
   progress: (position, total) => `Step ${position} of ${total}`,
-  asideToggle: "Preview"
+  asideToggle: "Preview",
+  stepsRow: "All steps, scrolls sideways"
 };
 var PHONE = `(width < ${breakpoint.phone})`;
 var STILL_ROW = { overflows: false, left: false, right: false };
@@ -24,6 +25,15 @@ function stepRowOf(scroller) {
   const right = Math.max(...boxes.map((r) => r.right)) > box.right + 0.5;
   return { overflows: scroller.scrollWidth > scroller.clientWidth + 0.5 || left || right, left, right };
 }
+function clearOfFade(scroller, step) {
+  const fade = Number.parseFloat(getComputedStyle(scroller).scrollPaddingInlineStart) || 0;
+  const box = scroller.getBoundingClientRect();
+  const drawn = step.getBoundingClientRect();
+  const pastRight = drawn.right - (box.right - fade);
+  const pastLeft = box.left + fade - drawn.left;
+  if (pastRight > 0) scroller.scrollLeft += pastRight;
+  else if (pastLeft > 0) scroller.scrollLeft -= pastLeft;
+}
 function SetupWizard({
   title,
   headingLevel,
@@ -147,8 +157,10 @@ function SetupWizard({
           phone ? (
             // A ROW THAT OVERFLOWS IS A SCROLLER THE KEYBOARD CAN REACH: it
             // takes focus and a name only while it hides steps, since a pill
-            // that only labels its step takes no focus of its own.
-            /* @__PURE__ */ jsx(
+            // that only labels its step takes no focus of its own. Its focus
+            // ring is drawn by the frame around it, which the edge fade does
+            // not reach (SetupWizard.css).
+            /* @__PURE__ */ jsx("div", { className: "crewlet-setup-wizard__steps-frame", children: /* @__PURE__ */ jsx(
               "div",
               {
                 ref: stepsRef,
@@ -156,10 +168,16 @@ function SetupWizard({
                 "data-fade-left": row.left ? "" : void 0,
                 "data-fade-right": row.right ? "" : void 0,
                 onScroll: measure,
-                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": stepsLabel } : {},
+                onFocus: (event) => {
+                  const step2 = event.target.closest("li");
+                  if (event.target === event.currentTarget || !step2 || !event.currentTarget.contains(step2)) return;
+                  clearOfFade(event.currentTarget, step2);
+                  measure();
+                },
+                ...row.overflows ? { tabIndex: 0, role: "group", "aria-label": text.stepsRow } : {},
                 children: stepper
               }
-            )
+            ) })
           ) : stepper
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-setup-wizard__content", "aria-labelledby": headingId, children: [

package/dist/{chunk-OOLMTUCO.js → chunk-SOERZJVJ.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-AOFVXE6V.js';
-import { SegmentedControl } from './chunk-BKXUZCZX.js';
+import { SegmentedControl } from './chunk-WOTGQVHZ.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-KL6A7JGH.js → chunk-SQ7GYC4K.js}

@@ -1,5 +1,5 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { ShortcutTip } from './chunk-OBPINJNO.js';
+import { ShortcutTip } from './chunk-EMCVX5FY.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';

package/dist/{chunk-T24HBEU6.js → chunk-TL74TBDR.js}

@@ -1,5 +1,5 @@
 import { normalizeHex, parseColourInput } from './chunk-7W3LYIOC.js';
-import { FormField, Input, InputAffix } from './chunk-FB3TCNQP.js';
+import { FormField, Input, InputAffix } from './chunk-6Q7RW2JJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorField-2OIOWT3Z.css';
 import { useId, useState } from 'react';

package/dist/{chunk-ADGNISEI.js → chunk-U4ICCJJP.js}

@@ -1,7 +1,7 @@
+import { Document } from './chunk-BXCL6P5Z.js';
 import { PrincipalAvatar } from './chunk-N2BF272H.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-EJNJMHQG.js';
-import { Document } from './chunk-BXCL6P5Z.js';
-import { Composer } from './chunk-E35HYQMK.js';
+import { Composer } from './chunk-CZUIPICC.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-DGXZ635L.js';

package/dist/{chunk-IQMWMT4V.js → chunk-UEEWK7SO.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-BKXUZCZX.js';
-import { tabId } from './chunk-6THG44LI.js';
+import { SegmentedControl } from './chunk-WOTGQVHZ.js';
+import { tabId } from './chunk-KQQWGWCC.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';

package/dist/{chunk-JQEXAH7G.js → chunk-VDIKDCNE.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-OBPINJNO.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-EMCVX5FY.js';
 import { focusables } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-5FPK4CII.css';

package/dist/{chunk-MP7DGKB6.js → chunk-VJ6SSEMG.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-BXOWAV46.js').then(
+  loading ??= import('./Editor-MPNGVAWD.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-CFTBESST.js → chunk-WM3U4ARK.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-6EWNMSS4.js';
+import { Combobox } from './chunk-FRLUJAFK.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-N2BF272H.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-P6UYHDJR.css';

package/dist/{chunk-BKXUZCZX.js → chunk-WOTGQVHZ.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-6THG44LI.js';
+import { tabId } from './chunk-KQQWGWCC.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-ZKLEAK7M.js → chunk-XL2RXAPT.js}

@@ -4,7 +4,7 @@ import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Card } from './chunk-4AUTALJA.js';
 import { AvatarStack } from './chunk-BT3GB7HC.js';
 import { ArtifactKindGround } from './chunk-NHLNHH4J.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
+import { Checkbox } from './chunk-GKWZTTFV.js';
 import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-PMBJMNBX.js → chunk-YLYIVN72.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-BKXUZCZX.js';
+import { SegmentedControl } from './chunk-WOTGQVHZ.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/generated/index.d.ts

@@ -45,6 +45,7 @@ export * from '../CharacterCount/index.js';
 export * from '../CharacterPicker/index.js';
 export * from '../Charts/index.js';
 export * from '../ChatThread/index.js';
+export * from '../CheckGrid/index.js';
 export * from '../Checkbox/index.js';
 export * from '../ChoiceButtons/index.js';
 export * from '../ChoiceCards/index.js';