@crewlethq/ui 0.34.2 → 0.35.0

package/dist/{chunk-EWAFN2IU.js → chunk-5VCG26CV.js}

@@ -3,18 +3,19 @@ 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-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 { ChangeMark } from './chunk-HAKTRTRP.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-OOMXLJ3S.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
-import { Menu } from './chunk-3EB2AV3H.js';
+import { Menu } from './chunk-BUVCV3WI.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-GDPCCZ4V.css';
+import './SheetGrid-YRDXTIIZ.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';
@@ -641,6 +642,10 @@ function SheetGrid({
   fit = "container",
   onDeleteRow,
   onDismissRefused,
+  renderColumnEditor,
+  settingsColumn,
+  onSettingsColumnChange,
+  onAddColumn,
   locale,
   className,
   labels: labelOverrides,
@@ -706,6 +711,14 @@ function SheetGrid({
   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;
+  const columnSettings = mode === "edit" && renderColumnEditor !== void 0;
+  const addsColumns = mode === "edit" && onAddColumn !== void 0;
+  const [ownSettingsColumn, setOwnSettingsColumn] = useState(null);
+  const openColumn = settingsColumn !== void 0 ? settingsColumn : ownSettingsColumn;
+  const setOpenColumn = (field) => {
+    if (settingsColumn === void 0) setOwnSettingsColumn(field);
+    onSettingsColumnChange?.(field);
+  };
   const scroller = useRef(null);
   const probe = useRef(null);
   const grid = useRef(null);
@@ -971,7 +984,7 @@ function SheetGrid({
     if (conflictText) say(conflictText);
   }, [conflictText, say]);
   const onCopy = (event) => {
-    if (editing || !range) return;
+    if (editing || !range || fromElsewhere(event)) return;
     event.preventDefault();
     event.clipboardData.setData("text/plain", toTSV(columns, rows, range, context));
   };
@@ -986,12 +999,12 @@ function SheetGrid({
     refuseLocally(plan.refused);
   }, [columns, context, editable, emit, labels.forbidden, range, refuseLocally, rows, say]);
   const onCut = (event) => {
-    if (editing || !range) return;
+    if (editing || !range || fromElsewhere(event)) return;
     onCopy(event);
     clearRange();
   };
   const onPaste = (event) => {
-    if (editing || !range) return;
+    if (editing || !range || fromElsewhere(event)) return;
     event.preventDefault();
     if (!editable) {
       say(labels.forbidden);
@@ -1003,7 +1016,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 (editing || isComposing(event) || !current || !currentCell || fromElsewhere(event)) return;
     if (event.target.closest(".crewlet-sheet-grid__row-actions")) return;
     const column = columns[current.col];
     const mod = isMod(event);
@@ -1058,7 +1071,10 @@ function SheetGrid({
       return;
     }
     if (current.row === HEADER) {
-      if ((event.key === "Enter" || event.key === " ") && column && onSortChange) {
+      if ((event.key === "Enter" || event.key === " ") && column && columnSettings) {
+        event.preventDefault();
+        setOpenColumn(column.field);
+      } else if ((event.key === "Enter" || event.key === " ") && column && onSortChange) {
         event.preventDefault();
         onSortChange(nextSort(sort, column.field));
       }
@@ -1168,249 +1184,277 @@ function SheetGrid({
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-grid", mode === "read" && "crewlet-sheet-grid--read", fit === "content" && "crewlet-sheet-grid--fit-content", className), children: [
     /* @__PURE__ */ jsx("div", { ref: probe, className: "crewlet-sheet-grid__probe", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         ref: scroller,
-        className: cx("crewlet-sheet-grid__scroller", scrolledAcross && "crewlet-sheet-grid__scroller--across"),
+        className: cx("crewlet-sheet-grid__scroller", scrolledAcross && "crewlet-sheet-grid__scroller--across", addsColumns && "crewlet-sheet-grid__scroller--add-column"),
         style: scrollerStyle,
         onScroll: (event) => {
           setScrollTop(event.currentTarget.scrollTop);
           setScrolledAcross(event.currentTarget.scrollLeft > 0);
         },
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: grid,
-            role: "grid",
-            "aria-label": label,
-            "aria-rowcount": rows.length + 1,
-            "aria-colcount": columns.length + 1,
-            "aria-readonly": !editable || void 0,
-            "aria-multiselectable": "true",
-            "aria-describedby": helpId,
-            tabIndex: -1,
-            className: cx("crewlet-sheet-grid__grid", range && (range.top !== range.bottom || range.left !== range.right) && "crewlet-sheet-grid__grid--range"),
-            style,
-            onKeyDown,
-            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: 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;
-                  const sorted = sort?.field === column.field ? sort.direction : void 0;
-                  const here = onColumns.get(column.field) ?? [];
-                  return (
-                    // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keys reach the grid's own handler, which sorts on Enter and Space
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        id: cellDomId(id, position),
-                        role: "columnheader",
-                        "aria-colindex": col + 2,
-                        "aria-sort": sorted ?? (onSortChange ? "none" : void 0),
-                        tabIndex: isActive ? 0 : -1,
-                        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) => {
-                          if (event.target === event.currentTarget) onCellFocus({ rowId: null, field: column.field });
-                        },
-                        onClick: () => {
-                          if (onSortChange) onSortChange(nextSort(sort, column.field));
-                        },
-                        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]}` }),
-                          sorted ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__sort", "aria-hidden": "true", children: sorted === "ascending" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }) }) : null,
-                          here.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-presence", "aria-hidden": "true", children: here.map((entry) => /* @__PURE__ */ jsx(Avatar, { name: entry.name, kind: entry.kind, size: 16, decorative: true, className: cx("crewlet-sheet-grid__header-badge", presenceHueClass(entry.hue)) }, entry.id)) }) : null
-                        ]
-                      },
-                      column.field
-                    )
-                  );
-                })
-              ] }) }),
-              /* @__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",
-                  {
-                    role: "row",
-                    "aria-rowindex": index + 2,
-                    className: "crewlet-sheet-grid__row",
-                    style: { top: `${index * rowHeight}px` },
-                    "data-row-id": row.id,
-                    children: [
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: grid,
+              role: "grid",
+              "aria-label": label,
+              "aria-rowcount": rows.length + 1,
+              "aria-colcount": columns.length + 1,
+              "aria-readonly": !editable || void 0,
+              "aria-multiselectable": "true",
+              "aria-describedby": helpId,
+              tabIndex: -1,
+              className: cx("crewlet-sheet-grid__grid", range && (range.top !== range.bottom || range.left !== range.right) && "crewlet-sheet-grid__grid--range"),
+              style,
+              onKeyDown,
+              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: 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;
+                    const sorted = sort?.field === column.field ? sort.direction : void 0;
+                    const here = onColumns.get(column.field) ?? [];
+                    const header = (
+                      // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keys reach the grid's own handler, which sorts or opens the column's settings on Enter and Space
                       /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          role: "rowheader",
-                          "aria-colindex": 1,
-                          "aria-labelledby": rowNameId,
+                          id: cellDomId(id, position),
+                          role: "columnheader",
+                          "aria-colindex": col + 2,
+                          "aria-sort": sorted ?? (onSortChange ? "none" : void 0),
+                          tabIndex: isActive ? 0 : -1,
                           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)
+                            "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",
+                            columnSettings && "crewlet-sheet-grid__header--settings",
+                            openColumn === column.field && "crewlet-sheet-grid__header--open"
                           ),
+                          style: column.frozen ? { insetInlineStart: `${offsets[col]}px` } : void 0,
+                          onMouseDown: (event) => {
+                            if (!fromElsewhere(event)) onCellMouseDown(event, { rowId: null, field: column.field });
+                          },
+                          onFocus: (event) => {
+                            if (event.target === event.currentTarget) onCellFocus({ rowId: null, field: column.field });
+                          },
+                          onClick: (event) => {
+                            if (fromElsewhere(event)) return;
+                            if (columnSettings) setOpenColumn(openColumn === column.field ? null : column.field);
+                            else if (onSortChange) onSortChange(nextSort(sort, column.field));
+                          },
+                          title: columnSettings ? labels.columnSettings(column.label) : onSortChange ? labels.sortBy(column.label) : column.label,
                           children: [
-                            /* @__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,
+                            /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-label", children: column.label }),
+                            /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${labels.types[column.type]}` }),
+                            sorted ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__sort", "aria-hidden": "true", children: sorted === "ascending" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }) }) : null,
+                            here.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-presence", "aria-hidden": "true", children: here.map((entry) => /* @__PURE__ */ jsx(Avatar, { name: entry.name, kind: entry.kind, size: 16, decorative: true, className: cx("crewlet-sheet-grid__header-badge", presenceHueClass(entry.hue)) }, entry.id)) }) : null
+                          ]
+                        },
+                        column.field
+                      )
+                    );
+                    return columnSettings ? /* @__PURE__ */ jsx(
+                      Popover,
+                      {
+                        label: labels.columnSettings(column.label),
+                        open: openColumn === column.field,
+                        onOpenChange: (open) => {
+                          if (!open && openColumn === column.field) setOpenColumn(null);
+                        },
+                        trigger: () => header,
+                        className: "crewlet-sheet-grid__column-settings",
+                        children: (close) => renderColumnEditor(column, close)
+                      },
+                      column.field
+                    ) : header;
+                  })
+                ] }) }),
+                /* @__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",
+                    {
+                      role: "row",
+                      "aria-rowindex": index + 2,
+                      className: "crewlet-sheet-grid__row",
+                      style: { top: `${index * rowHeight}px` },
+                      "data-row-id": row.id,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            role: "rowheader",
+                            "aria-colindex": 1,
+                            "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", { 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: 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",
+                                      label: labels.deleteRow,
+                                      icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                                      danger: true,
+                                      onSelect: () => onDeleteRow?.(row.id)
+                                    }
+                                  ]
+                                }
+                              ) }) : null
+                            ]
+                          }
+                        ),
+                        columns.map((column, col) => {
+                          const position = { row: index, col };
+                          const key = cellKey(row.id, column.field);
+                          const isActive = current?.row === index && current.col === col;
+                          const selected = range ? inRange(range, index, col) : false;
+                          const pending = row.pending?.includes(column.field) ?? false;
+                          const refused = row.refused?.[column.field] ?? local.get(key);
+                          const change = row.changed?.[column.field];
+                          const value = normalizeValue(column, row.values[column.field]);
+                          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(
+                              "div",
                               {
-                                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: "" }) })
+                                id: cellDomId(id, position),
+                                role: "gridcell",
+                                "aria-colindex": col + 2,
+                                "aria-selected": selected,
+                                "aria-readonly": !cellEditable(column) || void 0,
+                                "aria-describedby": isActive ? describedId : void 0,
+                                tabIndex: isActive && !isEditing ? 0 : -1,
+                                className: cx(
+                                  "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)
                                 ),
-                                items: [
-                                  {
-                                    key: "delete",
-                                    label: labels.deleteRow,
-                                    icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
-                                    danger: true,
-                                    onSelect: () => onDeleteRow?.(row.id)
+                                style: column.frozen ? { insetInlineStart: `${offsets[col]}px` } : void 0,
+                                onMouseDown: (event) => onCellMouseDown(event, { rowId: row.id, field: column.field }),
+                                onFocus: (event) => {
+                                  if (event.target === event.currentTarget) onCellFocus({ rowId: row.id, field: column.field });
+                                },
+                                onMouseEnter: () => onCellMouseEnter({ rowId: row.id, field: column.field }),
+                                onDoubleClick: () => {
+                                  if (column.type !== "checkbox") beginEdit({ rowId: row.id, field: column.field });
+                                },
+                                onClick: (event) => {
+                                  if (column.type === "checkbox" && event.target.closest(".crewlet-sheet-cell__check")) {
+                                    toggle({ rowId: row.id, field: column.field });
                                   }
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__value", children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context, onOpenLink }) }),
+                                  refused !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__refused", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) }) : null,
+                                  change ? /* @__PURE__ */ jsx(
+                                    ChangeMark,
+                                    {
+                                      by: change.by,
+                                      at: change.at,
+                                      previous: hasPrevious(change) ? displayText(column, normalizeValue(column, change.previous), context) || null : null,
+                                      locale,
+                                      labels
+                                    }
+                                  ) : 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,
+                                  history ? /* @__PURE__ */ jsx(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      tabIndex: -1,
+                                      "aria-hidden": "true",
+                                      className: "crewlet-sheet-grid__history",
+                                      title: labels.history,
+                                      onMouseDown: (event) => event.stopPropagation(),
+                                      onClick: () => onShowHistory?.({ rowId: row.id, field: column.field }),
+                                      children: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" })
+                                    }
+                                  ) : null,
+                                  isEditing ? /* @__PURE__ */ jsx(
+                                    CellEditor,
+                                    {
+                                      column,
+                                      value,
+                                      context,
+                                      seed: editing.seed,
+                                      label: `${column.label}, ${rowName(columns, row, index, context)}`,
+                                      side: side(index),
+                                      conflict,
+                                      onCommit: (next, move) => endEdit(next, move),
+                                      onCancel: () => endEdit(void 0, null)
+                                    }
+                                  ) : null
                                 ]
-                              }
-                            ) }) : null
-                          ]
-                        }
-                      ),
-                      columns.map((column, col) => {
-                        const position = { row: index, col };
-                        const key = cellKey(row.id, column.field);
-                        const isActive = current?.row === index && current.col === col;
-                        const selected = range ? inRange(range, index, col) : false;
-                        const pending = row.pending?.includes(column.field) ?? false;
-                        const refused = row.refused?.[column.field] ?? local.get(key);
-                        const change = row.changed?.[column.field];
-                        const value = normalizeValue(column, row.values[column.field]);
-                        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(
-                            "div",
-                            {
-                              id: cellDomId(id, position),
-                              role: "gridcell",
-                              "aria-colindex": col + 2,
-                              "aria-selected": selected,
-                              "aria-readonly": !cellEditable(column) || void 0,
-                              "aria-describedby": isActive ? describedId : void 0,
-                              tabIndex: isActive && !isEditing ? 0 : -1,
-                              className: cx(
-                                "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)
-                              ),
-                              style: column.frozen ? { insetInlineStart: `${offsets[col]}px` } : void 0,
-                              onMouseDown: (event) => onCellMouseDown(event, { rowId: row.id, field: column.field }),
-                              onFocus: (event) => {
-                                if (event.target === event.currentTarget) onCellFocus({ rowId: row.id, field: column.field });
-                              },
-                              onMouseEnter: () => onCellMouseEnter({ rowId: row.id, field: column.field }),
-                              onDoubleClick: () => {
-                                if (column.type !== "checkbox") beginEdit({ rowId: row.id, field: column.field });
-                              },
-                              onClick: (event) => {
-                                if (column.type === "checkbox" && event.target.closest(".crewlet-sheet-cell__check")) {
-                                  toggle({ rowId: row.id, field: column.field });
-                                }
                               },
-                              children: [
-                                /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__value", children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context, onOpenLink }) }),
-                                refused !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__refused", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) }) : null,
-                                change ? /* @__PURE__ */ jsx(
-                                  ChangeMark,
-                                  {
-                                    by: change.by,
-                                    at: change.at,
-                                    previous: hasPrevious(change) ? displayText(column, normalizeValue(column, change.previous), context) || null : null,
-                                    locale,
-                                    labels
-                                  }
-                                ) : 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,
-                                history ? /* @__PURE__ */ jsx(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    tabIndex: -1,
-                                    "aria-hidden": "true",
-                                    className: "crewlet-sheet-grid__history",
-                                    title: labels.history,
-                                    onMouseDown: (event) => event.stopPropagation(),
-                                    onClick: () => onShowHistory?.({ rowId: row.id, field: column.field }),
-                                    children: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" })
-                                  }
-                                ) : null,
-                                isEditing ? /* @__PURE__ */ jsx(
-                                  CellEditor,
-                                  {
-                                    column,
-                                    value,
-                                    context,
-                                    seed: editing.seed,
-                                    label: `${column.label}, ${rowName(columns, row, index, context)}`,
-                                    side: side(index),
-                                    conflict,
-                                    onCommit: (next, move) => endEdit(next, move),
-                                    onCancel: () => endEdit(void 0, null)
-                                  }
-                                ) : null
-                              ]
-                            },
-                            column.field
-                          )
-                        );
-                      })
-                    ]
-                  },
-                  row.id
-                );
-              }) })
-            ]
-          }
-        )
+                              column.field
+                            )
+                          );
+                        })
+                      ]
+                    },
+                    row.id
+                  );
+                }) })
+              ]
+            }
+          ),
+          addsColumns ? (
+            // OUTSIDE THE GRID'S ROLES: a grid's rows hold cells only, so the
+            // control stands beside the header row, sticks with it, and is its
+            // own tab stop after the grid's.
+            /* @__PURE__ */ jsx("div", { className: "crewlet-sheet-grid__add-column", style: { height: `${headerHeight}px` }, children: /* @__PURE__ */ jsx(Tooltip, { content: labels.addColumn, children: /* @__PURE__ */ jsx(IconButton, { label: labels.addColumn, icon: /* @__PURE__ */ jsx(PlusGlyph, {}), size: "sm", title: "", onClick: onAddColumn }) }) })
+          ) : null
+        ]
       }
     ),
     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: [
@@ -1421,7 +1465,7 @@ function SheetGrid({
       (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, { id: helpId, children: [labels.keyboardHelp, rowActions ? labels.rowActionsHelp : "", columnSettings ? labels.columnSettingsHelp : ""].filter(Boolean).join(" ") }),
     /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.n) }) }),
     onAddRow || sync ? /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-grid__foot", children: [
       onAddRow && editable ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onAddRow, leadingIcon: /* @__PURE__ */ jsx(PlusGlyph, { size: "sm" }), children: labels.addRow }) : null,
@@ -1442,6 +1486,9 @@ function SheetGrid({
     ] }) : null
   ] });
 }
+function fromElsewhere(event) {
+  return !event.currentTarget.contains(event.target);
+}
 function cellDomId(grid, position) {
   return `${grid}-r${position.row < 0 ? "h" : position.row}-c${position.col}`;
 }