@crewlethq/ui 0.32.0 → 0.34.0

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

@@ -1,14 +1,14 @@
-import { Select } from './chunk-FC4YTTFJ.js';
+import { Select } from './chunk-BQ7AKL2N.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 { Modal } from './chunk-XEGZHHRH.js';
+import { Callout } from './chunk-SZZRIHGT.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ShareDialog-YZ4F37MW.css';
+import './ShareDialog-4QDCBWMH.css';
 import { useState, useId } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { XGlyph } from '@crewlethq/icons/glyphs';
@@ -43,6 +43,7 @@ var LABELS = {
   },
   roleFor: (name) => `Role for ${name}`,
   remove: (name) => `Remove ${name}`,
+  noAccess: "No access",
   saving: "Saving",
   busy: "Wait for the change to finish.",
   agentNote: (name, role) => `${name} can ${AGENT_CAN[role]}.`,
@@ -143,52 +144,62 @@ function ShareDialog({
           /* @__PURE__ */ jsx(Heading, { id: audienceId, className: "crewlet-share-dialog__heading", children: text.audience }),
           /* @__PURE__ */ jsx("ul", { className: "crewlet-share-dialog__audience", children: audience.map((row) => {
             const direct = row.via === void 0 && row.role !== "owner";
-            const editable = !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
-            const removable = !readOnly && onRemove !== void 0 && (row.removable ?? (row.editable ?? direct));
-            const rowNote = row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
+            const invalid = row.invalid !== void 0 && row.invalid !== "";
+            const editable = !invalid && !readOnly && onRoleChange !== void 0 && (row.editable ?? direct);
+            const removable = !readOnly && onRemove !== void 0 && (invalid ? row.removable ?? true : row.removable ?? (row.editable ?? direct));
+            const rowNote = invalid ? void 0 : row.note ?? (row.principal.kind === "agent" ? text.agentNote(row.principal.name, row.role) : void 0);
             const detail = row.via ?? row.principal.detail;
-            return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-share-dialog__row", row.pending && "is-pending"), "aria-busy": row.pending || void 0, children: [
-              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
-                /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
-                  row.principal.name,
-                  row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
-                    " ",
-                    text.you
-                  ] }) : null
-                ] }),
-                detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
-              ] }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
-                row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
-                editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
-                  Select,
-                  {
-                    value: row.role,
-                    options: roleOptions,
-                    onChange: (value) => onRoleChange(row, value),
-                    ariaLabel: text.roleFor(row.principal.name),
-                    disabled: row.pending ?? false,
-                    size: "sm",
-                    width: "auto",
-                    align: "right"
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: text.roles[row.role] }),
-                removable ? /* @__PURE__ */ jsx(
-                  IconButton,
-                  {
-                    label: text.remove(row.principal.name),
-                    icon: /* @__PURE__ */ jsx(XGlyph, {}),
-                    size: "sm",
-                    variant: "ghost",
-                    disabledReason: row.pending ? text.busy : void 0,
-                    onClick: () => onRemove(row)
-                  }
-                ) : null
-              ] }),
-              rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
-              /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
-            ] }, row.id);
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: cx("crewlet-share-dialog__row", row.pending && "is-pending", invalid && "is-invalid"),
+                "aria-busy": row.pending || void 0,
+                children: [
+                  /* @__PURE__ */ jsx(PrincipalAvatar, { principal: row.principal, size: "md" }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__who", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__name", children: [
+                      row.principal.name,
+                      row.self ? /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__you", children: [
+                        " ",
+                        text.you
+                      ] }) : null
+                    ] }),
+                    detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__detail", children: detail }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-share-dialog__controls", children: [
+                    row.pending ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__saving", children: text.saving }) : null,
+                    editable && row.role !== "owner" ? /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        value: row.role,
+                        options: roleOptions,
+                        onChange: (value) => onRoleChange(row, value),
+                        ariaLabel: text.roleFor(row.principal.name),
+                        disabled: row.pending ?? false,
+                        size: "sm",
+                        width: "auto",
+                        align: "right"
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__role", children: invalid ? text.noAccess : text.roles[row.role] }),
+                    removable ? /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        label: text.remove(row.principal.name),
+                        icon: /* @__PURE__ */ jsx(XGlyph, {}),
+                        size: "sm",
+                        variant: "ghost",
+                        disabledReason: row.pending ? text.busy : void 0,
+                        onClick: () => onRemove(row)
+                      }
+                    ) : null
+                  ] }),
+                  rowNote ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__note", children: rowNote }) : null,
+                  invalid ? /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__invalid", children: row.invalid }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-share-dialog__refusal", "aria-live": "polite", children: row.refusal ?? "" })
+                ]
+              },
+              row.id
+            );
           }) })
         ] }),
         /* @__PURE__ */ jsxs("section", { className: "crewlet-share-dialog__section", "aria-labelledby": companyId, "aria-busy": companyPending || void 0, children: [

package/dist/{chunk-6AH2XJ3Q.js → chunk-CFAJP777.js}

@@ -1,8 +1,8 @@
-import { Document } from './chunk-M3LUNN7F.js';
-import { ArtifactKindGlyph } from './chunk-GOSQXEZU.js';
+import { Document } from './chunk-TYKQ33CL.js';
+import { ArtifactKindGlyph } from './chunk-XTOVADJU.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
-import './DashboardCover-RMINBODB.css';
+import './DashboardCover-KYGYMRKW.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function DocCover({ children, className }) {

package/dist/{chunk-4KP4RC3O.js → chunk-CI3VPIJN.js}

@@ -1,4 +1,4 @@
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { UsersGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-7T42VQQT.js → chunk-CPEPST4S.js}

@@ -1,6 +1,6 @@
 import { FormField } from './chunk-6QFAK2WV.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-5UORUG3F.css';
+import './Checkbox-ALWG3WV2.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

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

@@ -1,8 +1,8 @@
-import { Skeleton } from './chunk-W5J7R5EB.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './WidgetFrame-LRZIL62O.css';
+import './WidgetFrame-BTFW3CRK.css';
 import { useId } from 'react';
 import { ClockGlyph, LockGlyph, CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -22,6 +22,7 @@ function WidgetFrame({
   onCite,
   actions,
   flush = false,
+  holdTitle = false,
   headingLevel = 3,
   now,
   labels,
@@ -36,7 +37,7 @@ function WidgetFrame({
   const citation = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { children: text.cite }),
     " ",
-    /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__source", children: source.label }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__source", title: source.label, children: source.label }),
     source.status === "live" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       " ",
       /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__when", children: text.live })
@@ -64,6 +65,7 @@ function WidgetFrame({
         "crewlet-widget-frame",
         `crewlet-widget-frame--${source.status}`,
         flush && "crewlet-widget-frame--flush",
+        holdTitle && "crewlet-widget-frame--hold-title",
         className
       ),
       "aria-labelledby": titleId,

package/dist/{chunk-V5IGUXMZ.js → chunk-E4NNGC6X.js}

@@ -1,6 +1,6 @@
-import { richEditorLabels } from './chunk-A4E5YLXO.js';
-import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Callout } from './chunk-SVSCLHHI.js';
+import { richEditorLabels } from './chunk-4B6LSFDS.js';
+import { Callout } from './chunk-SZZRIHGT.js';
+import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import './RichEditor-NPD2KAPS.css';
 import { forwardRef, useState, useEffect } from 'react';
@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-YWBUJAQU.js').then(
+  loading ??= import('./Editor-UUZ7XKCU.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-TGYDROIB.js → chunk-EBCHVFCS.js}

@@ -1,8 +1,8 @@
-import { HuePicker } from './chunk-LIXSV5YI.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { HuePicker } from './chunk-GPHWCK7M.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-HVIX5ECM.js';
-import { Avatar } from './chunk-5OM447RW.js';
+import { CharacterPicker } from './chunk-YEVG2X5R.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';
 import { CREWLET_CHARACTER_GEOMETRY, CREWLET_CHARACTERS } from '@crewlethq/icons/characters';

package/dist/{chunk-LWXRD6L6.js → chunk-EWAFN2IU.js}

@@ -3,16 +3,18 @@ import { Tag } from './chunk-GFV4LJHH.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-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 { ChangeMark } from './chunk-SGHIAGPR.js';
+import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, 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-VI5FWDZW.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
-import { Avatar } from './chunk-5OM447RW.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { isComposing } from './chunk-R25RGPUB.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 './SheetGrid-J3TKKXZL.css';
+import './SheetGrid-GDPCCZ4V.css';
 import { useId, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
 import { CheckGlyph, StarGlyph, CircleAlertGlyph, ArrowUpGlyph, ArrowDownGlyph, TrashGlyph, EllipsisGlyph, RotateCcwClockGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
 import { isCrewletCharacter } from '@crewlethq/icons/characters';
@@ -615,6 +617,7 @@ var DateCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "date
 var UrlCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "url" });
 var RatingCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "rating" });
 var HEADER = -1;
+var FROZEN_SHARE = 0.6;
 function SheetGrid({
   label,
   columns: declared,
@@ -647,7 +650,59 @@ function SheetGrid({
   const labels = useMemo(() => sheetLabels(labelOverrides), [labelOverrides]);
   const said = useMemo(() => presenceLabels(presenceOverrides), [presenceOverrides]);
   const context = useMemo(() => ({ people, locale, labels }), [people, locale, labels]);
-  const columns = useMemo(() => drawnColumns(declared), [declared]);
+  const ordered = useMemo(() => drawnColumns(declared), [declared]);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const latestRows = useRef(given);
+  useLayoutEffect(() => {
+    latestRows.current = given;
+  });
+  const hasRows = given.length > 0;
+  const [samples, setSamples] = useState(null);
+  useLayoutEffect(() => {
+    const from = hasRows ? latestRows.current : [];
+    setSamples(new Map(ordered.filter((column) => !(column.width && column.width > 0)).map((column) => [column.field, fitSamples(column, from, context)])));
+  }, [ordered, hasRows, context]);
+  const [fontsLoaded, setFontsLoaded] = useState(0);
+  useEffect(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts) return void 0;
+    let live = true;
+    const loaded = () => {
+      if (live) setFontsLoaded((n) => n + 1);
+    };
+    void fonts.ready.then(loaded);
+    fonts.addEventListener("loadingdone", loaded);
+    return () => {
+      live = false;
+      fonts.removeEventListener("loadingdone", loaded);
+    };
+  }, []);
+  const measurer = useRef(null);
+  const [measured, setMeasured] = useState(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const box = measurer.current;
+    if (!box) return;
+    const next = /* @__PURE__ */ new Map();
+    for (const group of box.querySelectorAll("[data-measure]")) {
+      let widest = 0;
+      for (const part of group.children) widest = Math.max(widest, part.getBoundingClientRect().width);
+      next.set(group.dataset["measure"] ?? "", widest);
+    }
+    setMeasured(next);
+  }, [samples, fontsLoaded]);
+  const columns = useMemo(() => {
+    const declares = (column) => column.width !== void 0 && column.width > 0;
+    const fitted = ordered.map((column) => declares(column) ? column : { ...column, width: fittedWidth(column.type, measured.get(column.field) ?? 0) });
+    if (viewportWidth <= 0) return fitted;
+    const room = Math.floor(viewportWidth * FROZEN_SHARE) - SHEET_ROW_NUMBER_WIDTH;
+    const over = fitted.filter((column) => column.frozen).reduce((sum, column) => sum + columnWidth(column), 0) - room;
+    const yielding = ordered.filter((column) => column.frozen && !declares(column)).length;
+    if (over <= 0 || yielding === 0) return fitted;
+    const each = Math.ceil(over / yielding);
+    return fitted.map(
+      (column, index) => column.frozen && !declares(ordered[index]) ? { ...column, width: Math.max(SHEET_COLUMN_BOUNDS[column.type][0], columnWidth(column) - each) } : column
+    );
+  }, [ordered, measured, viewportWidth]);
   const rows = useMemo(() => sortRows(columns, given, sort, context), [columns, given, sort, context]);
   const editable = mode === "edit" && onEdit !== void 0;
   const rowActions = mode === "edit" && onDeleteRow !== void 0;
@@ -660,13 +715,13 @@ function SheetGrid({
   const [headerHeight, setHeaderHeight] = useState(SHEET_ROW_HEIGHT);
   const [viewport, setViewport] = useState(0);
   const [scrollTop, setScrollTop] = useState(0);
+  const [scrolledAcross, setScrolledAcross] = useState(false);
   const [active, setActive] = useState(null);
   const [anchor, setAnchor] = useState(null);
   const [editing, setEditing] = useState(null);
   const [local, setLocal] = useState(/* @__PURE__ */ new Map());
   const [announcement, setAnnouncement] = useState({ text: "", n: 0 });
   const dragging = useRef(false);
-  const [hoveredRow, setHoveredRow] = useState(null);
   const [rowMenu, setRowMenu] = useState(null);
   const say = useCallback((text) => setAnnouncement((current2) => ({ text, n: current2.n + 1 })), []);
   const heardRefusals = useRef(/* @__PURE__ */ new Map());
@@ -690,6 +745,7 @@ function SheetGrid({
       const head = grid.current?.querySelector(".crewlet-sheet-grid__row--head")?.offsetHeight ?? 0;
       if (head > 0) setHeaderHeight(head);
       setViewport(scroller.current?.clientHeight ?? 0);
+      setViewportWidth(scroller.current?.clientWidth ?? 0);
     };
     measure();
     if (typeof ResizeObserver !== "function") return void 0;
@@ -707,6 +763,7 @@ function SheetGrid({
     [columns]
   );
   const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + columnWidth(column), SHEET_ROW_NUMBER_WIDTH), [columns]);
+  const lastFrozen = useMemo(() => columns.reduce((edge, column, index) => column.frozen ? index : edge, -1), [columns]);
   const frozenEdge = useMemo(() => {
     let edge = SHEET_ROW_NUMBER_WIDTH;
     columns.forEach((column, index) => {
@@ -947,6 +1004,7 @@ function SheetGrid({
   const page = Math.max(1, Math.floor(Math.max(viewport - headerHeight, rowHeight) / rowHeight) - 1);
   const onKeyDown = (event) => {
     if (editing || isComposing(event) || !current || !currentCell) return;
+    if (event.target.closest(".crewlet-sheet-grid__row-actions")) return;
     const column = columns[current.col];
     const mod = isMod(event);
     if (mod && event.altKey && event.key.toLowerCase() === "h") {
@@ -1099,7 +1157,10 @@ function SheetGrid({
     width: `${totalWidth}px`
   };
   const contentHeight = headerHeight + rows.length * rowHeight + 2;
-  const scrollerStyle = fit === "content" ? { height: `${height !== void 0 ? Math.min(contentHeight, height) : contentHeight}px` } : height !== void 0 ? { height: `${height}px` } : void 0;
+  const scrollerStyle = fit === "content" ? {
+    height: `${height !== void 0 ? Math.min(contentHeight, height) : contentHeight}px`,
+    "--crewlet-sheet-content-height": `${contentHeight}px`
+  } : height !== void 0 ? { height: `${height}px` } : void 0;
   const side = (rowAt) => {
     const top = headerHeight + rowAt * rowHeight - scrollTop;
     const view = viewport > 0 ? viewport : rowHeight * 12;
@@ -1111,9 +1172,12 @@ function SheetGrid({
       "div",
       {
         ref: scroller,
-        className: "crewlet-sheet-grid__scroller",
+        className: cx("crewlet-sheet-grid__scroller", scrolledAcross && "crewlet-sheet-grid__scroller--across"),
         style: scrollerStyle,
-        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        onScroll: (event) => {
+          setScrollTop(event.currentTarget.scrollTop);
+          setScrolledAcross(event.currentTarget.scrollLeft > 0);
+        },
         children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1126,20 +1190,15 @@ function SheetGrid({
             "aria-multiselectable": "true",
             "aria-describedby": helpId,
             tabIndex: -1,
-            className: "crewlet-sheet-grid__grid",
+            className: cx("crewlet-sheet-grid__grid", range && (range.top !== range.bottom || range.left !== range.right) && "crewlet-sheet-grid__grid--range"),
             style,
             onKeyDown,
-            onMouseMove: rowActions ? (event) => {
-              const over = event.target.closest("[data-row-id]")?.dataset["rowId"] ?? null;
-              setHoveredRow((was) => was === over ? was : over);
-            } : void 0,
-            onMouseLeave: rowActions ? () => setHoveredRow(null) : void 0,
             onCopy,
             onCut,
             onPaste,
             children: [
               /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-sheet-grid__head", children: /* @__PURE__ */ jsxs("div", { role: "row", "aria-rowindex": 1, className: "crewlet-sheet-grid__row crewlet-sheet-grid__row--head", children: [
-                /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-colindex": 1, className: "crewlet-sheet-grid__corner", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.rowHeader }) }),
+                /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-colindex": 1, className: cx("crewlet-sheet-grid__corner", lastFrozen < 0 && "crewlet-sheet-grid__frozen-edge"), children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.rowHeader }) }),
                 columns.map((column, col) => {
                   const position = { row: HEADER, col };
                   const isActive = current?.row === HEADER && current.col === col;
@@ -1155,7 +1214,13 @@ function SheetGrid({
                         "aria-colindex": col + 2,
                         "aria-sort": sorted ?? (onSortChange ? "none" : void 0),
                         tabIndex: isActive ? 0 : -1,
-                        className: cx("crewlet-sheet-grid__header", column.frozen && "crewlet-sheet-grid__cell--frozen", isActive && "crewlet-sheet-grid__header--active"),
+                        className: cx(
+                          "crewlet-sheet-grid__header",
+                          `crewlet-sheet-grid__header--${column.type}`,
+                          column.frozen && "crewlet-sheet-grid__cell--frozen",
+                          col === lastFrozen && "crewlet-sheet-grid__frozen-edge",
+                          isActive && "crewlet-sheet-grid__header--active"
+                        ),
                         style: column.frozen ? { insetInlineStart: `${offsets[col]}px` } : void 0,
                         onMouseDown: (event) => onCellMouseDown(event, { rowId: null, field: column.field }),
                         onFocus: (event) => {
@@ -1164,7 +1229,7 @@ function SheetGrid({
                         onClick: () => {
                           if (onSortChange) onSortChange(nextSort(sort, column.field));
                         },
-                        title: onSortChange ? labels.sortBy(column.label) : void 0,
+                        title: onSortChange ? labels.sortBy(column.label) : column.label,
                         children: [
                           /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-label", children: column.label }),
                           /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${labels.types[column.type]}` }),
@@ -1180,6 +1245,9 @@ function SheetGrid({
               /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-sheet-grid__body", style: { height: `${rows.length * rowHeight}px` }, children: drawn.map((index) => {
                 const row = rows[index];
                 const rowPresence = onRows.get(row.id);
+                const rowNameId = `${id}-r${index}-name`;
+                const rowSelected = range !== null && index >= range.top && index <= range.bottom;
+                const actionsLabel = labels.rowActions(index + 1);
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -1194,18 +1262,31 @@ function SheetGrid({
                         {
                           role: "rowheader",
                           "aria-colindex": 1,
-                          className: cx("crewlet-sheet-grid__rownum", rowPresence && "crewlet-sheet-grid__rownum--present", rowPresence && presenceHueClass(rowPresence.hue)),
+                          "aria-labelledby": rowNameId,
+                          className: cx(
+                            "crewlet-sheet-grid__rownum",
+                            lastFrozen < 0 && "crewlet-sheet-grid__frozen-edge",
+                            rowActions && "crewlet-sheet-grid__rownum--actions",
+                            rowSelected && "crewlet-sheet-grid__rownum--selected",
+                            rowMenu === row.id && "crewlet-sheet-grid__rownum--open",
+                            rowPresence && "crewlet-sheet-grid__rownum--present",
+                            rowPresence && presenceHueClass(rowPresence.hue)
+                          ),
                           children: [
-                            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index + 1 }),
-                            /* @__PURE__ */ jsx(VisuallyHidden, { children: rowName(columns, row, index, context) }),
-                            rowActions && (rowMenu === row.id || hoveredRow === row.id || current?.row === index) ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__row-actions", children: /* @__PURE__ */ jsx(
+                            /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__rownum-number", "aria-hidden": "true", children: index + 1 }),
+                            /* @__PURE__ */ jsx(VisuallyHidden, { id: rowNameId, children: rowName(columns, row, index, context) }),
+                            rowActions ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__row-actions", children: /* @__PURE__ */ jsx(
                               Menu,
                               {
-                                label: labels.rowActions(index + 1),
-                                icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "xs" }),
+                                label: actionsLabel,
                                 triggerTabIndex: -1,
                                 open: rowMenu === row.id,
                                 onOpenChange: (open) => setRowMenu(open ? row.id : null),
+                                renderTrigger: (trigger) => (
+                                  // Lined up with the button's leading edge: the gutter is the
+                                  // grid's first column, and a centred tip hung past the grid.
+                                  /* @__PURE__ */ jsx(Tooltip, { content: actionsLabel, align: "start", children: /* @__PURE__ */ jsx(IconButton, { ...trigger, label: actionsLabel, icon: /* @__PURE__ */ jsx(EllipsisGlyph, {}), size: "sm", title: "" }) })
+                                ),
                                 items: [
                                   {
                                     key: "delete",
@@ -1232,6 +1313,7 @@ function SheetGrid({
                         const people2 = onCells.get(key);
                         const lead = people2?.[0];
                         const isEditing = editing?.rowId === row.id && editing.field === column.field;
+                        const history = isActive && onShowHistory !== void 0 && !isEditing;
                         return (
                           // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keys reach the grid's own handler, which toggles on Space and Enter
                           /* @__PURE__ */ jsxs(
@@ -1248,11 +1330,13 @@ function SheetGrid({
                                 "crewlet-sheet-grid__cell",
                                 `crewlet-sheet-grid__cell--${column.type}`,
                                 column.frozen && "crewlet-sheet-grid__cell--frozen",
+                                col === lastFrozen && "crewlet-sheet-grid__frozen-edge",
                                 selected && "crewlet-sheet-grid__cell--selected",
                                 isActive && "crewlet-sheet-grid__cell--active",
                                 pending && "crewlet-sheet-grid__cell--pending",
                                 refused !== void 0 && "crewlet-sheet-grid__cell--refused",
                                 isEditing && "crewlet-sheet-grid__cell--editing",
+                                history && "crewlet-sheet-grid__cell--history",
                                 lead && "crewlet-presence-ring",
                                 lead && presenceHueClass(lead.hue),
                                 lead && (lead.idle ? "crewlet-presence-ring--idle" : null)
@@ -1286,7 +1370,7 @@ function SheetGrid({
                                 ) : null,
                                 people2 && lead ? /* @__PURE__ */ jsx(CursorFlag, { name: flagText(people2), hue: lead.hue, kind: lead.kind, editing: people2.some((entry) => entry.editing) }) : null,
                                 isActive && refused !== void 0 && !isEditing ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__message", "aria-hidden": "true", children: refused }) : null,
-                                isActive && onShowHistory && !isEditing ? /* @__PURE__ */ jsx(
+                                history ? /* @__PURE__ */ jsx(
                                   "button",
                                   {
                                     type: "button",
@@ -1295,7 +1379,7 @@ function SheetGrid({
                                     className: "crewlet-sheet-grid__history",
                                     title: labels.history,
                                     onMouseDown: (event) => event.stopPropagation(),
-                                    onClick: () => onShowHistory({ rowId: row.id, field: column.field }),
+                                    onClick: () => onShowHistory?.({ rowId: row.id, field: column.field }),
                                     children: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" })
                                   }
                                 ) : null,
@@ -1329,6 +1413,13 @@ function SheetGrid({
         )
       }
     ),
+    samples ? /* @__PURE__ */ jsx("div", { ref: measurer, className: "crewlet-sheet-grid__measure", "aria-hidden": "true", inert: true, children: ordered.filter((column) => samples.has(column.field)).map((column) => /* @__PURE__ */ jsxs("div", { "data-measure": column.field, children: [
+      /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-grid__header", `crewlet-sheet-grid__header--${column.type}`), children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-label", children: column.label }),
+        onSortChange ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__sort", children: /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }) }) : null
+      ] }),
+      (samples.get(column.field) ?? []).map((value, index) => /* @__PURE__ */ jsx("div", { className: cx("crewlet-sheet-grid__cell", `crewlet-sheet-grid__cell--${column.type}`), children: /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__value", children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context }) }) }, index))
+    ] }, column.field)) }) : null,
     /* @__PURE__ */ jsx(VisuallyHidden, { id: describedId, children: description }),
     /* @__PURE__ */ jsx(VisuallyHidden, { id: helpId, children: rowActions ? `${labels.keyboardHelp} ${labels.rowActionsHelp}` : labels.keyboardHelp }),
     /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.n) }) }),

package/dist/{chunk-YDBC4DNW.js → chunk-FWYHRU7M.js}

@@ -1,4 +1,4 @@
-import { avatarCorner, Avatar } from './chunk-5OM447RW.js';
+import { avatarCorner, Avatar } from './chunk-PZKHBB7D.js';
 import './ImageUpload-NVGMN7DP.css';
 import { useRef } from 'react';
 import { CameraGlyph, XGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-HVNTQ36V.js → chunk-GMU6SQ6B.js}

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

package/dist/{chunk-LIXSV5YI.js → chunk-GPHWCK7M.js}

@@ -1,5 +1,5 @@
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-UQHKFF2N.js → chunk-GPWJCP3U.js}

@@ -1,5 +1,5 @@
 import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
-import { Avatar } from './chunk-5OM447RW.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';