@crewlethq/ui 0.24.0 → 0.25.0

package/dist/{chunk-36CWC2NH.js → chunk-INTEH4F3.js}

@@ -1,18 +1,20 @@
-import { Tag } from './chunk-GFV4LJHH.js';
-import { StatusDot } from './chunk-WIATRXEJ.js';
+import { TagGroup } from './chunk-O2EGEONV.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-import { ChangeMark } from './chunk-PPAQFGS2.js';
-import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, isMod, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, cellKey, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, moveFrom, isTypingKey, editorSide, optionHue, checkValue, parseText, liveOptions } from './chunk-YYZRLLLY.js';
-import { presenceLabels } from './chunk-S35G6PNC.js';
+import { Tag } from './chunk-GFV4LJHH.js';
+import { StatusDot } from './chunk-WIATRXEJ.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 { presenceLabels } from './chunk-Z7JYG5TF.js';
 import { Avatar } from './chunk-5OM447RW.js';
+import { Menu } from './chunk-UFKUWVMV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SheetGrid-4HOXDVIB.css';
+import './SheetGrid-J3TKKXZL.css';
 import { useId, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
-import { CheckGlyph, StarGlyph, CircleAlertGlyph, ArrowUpGlyph, ArrowDownGlyph, RotateCcwClockGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
+import { CheckGlyph, StarGlyph, CircleAlertGlyph, ArrowUpGlyph, ArrowDownGlyph, TrashGlyph, EllipsisGlyph, RotateCcwClockGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
 import { isCrewletCharacter } from '@crewlethq/icons/characters';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -57,7 +59,7 @@ function CellDisplay({ column, value, context, onOpenLink }) {
     case "select":
       return /* @__PURE__ */ jsx(OptionChip, { column, id: String(value), labels });
     case "multiselect":
-      return /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__chips", children: value.map((id) => /* @__PURE__ */ jsx(OptionChip, { column, id, labels }, id)) });
+      return /* @__PURE__ */ jsx(TagGroup, { label: column.label, overflow: "fit", className: "crewlet-sheet-cell__chips", children: value.map((id) => /* @__PURE__ */ jsx(OptionChip, { column, id, labels }, id)) });
     case "status": {
       const option = findOption(column, String(value));
       const words = displayText(column, value, context);
@@ -98,17 +100,27 @@ function CellDisplay({ column, value, context, onOpenLink }) {
   }
 }
 var LINE_TYPES = /* @__PURE__ */ new Set(["text", "number", "url", "date", "rating"]);
+var TEXT_TYPES = /* @__PURE__ */ new Set(["text", "longtext"]);
+var TEXT_EDITOR_LINES = 6;
+var LIST_FILTER_FROM = 8;
 var LIST_TYPES = /* @__PURE__ */ new Set(["select", "multiselect", "status", "person"]);
 var hasEditor = (type) => type !== "checkbox";
 var takesTyping = (type) => LINE_TYPES.has(type) || LIST_TYPES.has(type) || type === "longtext";
 function endingMove(event, multiline) {
   if (event.key === "Tab") return event.shiftKey ? "left" : "right";
   if (event.key === "Enter") {
-    if (multiline && !isMod(event)) return void 0;
+    if (multiline) return event.shiftKey && !isMod(event) ? void 0 : "down";
     return event.shiftKey ? "up" : "down";
   }
   return void 0;
 }
+function focusInPlace(el, caretAtEnd) {
+  if (!el) return;
+  el.focus({ preventScroll: true });
+  if (caretAtEnd && (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+    el.setSelectionRange(el.value.length, el.value.length);
+  }
+}
 function useLeave(end) {
   const done = useRef(false);
   return {
@@ -148,7 +160,7 @@ function ErrorNote({ id, message }) {
 function CellEditor(props) {
   const { column } = props;
   if (LIST_TYPES.has(column.type)) return /* @__PURE__ */ jsx(ListEditor, { ...props });
-  if (column.type === "longtext") return /* @__PURE__ */ jsx(LongTextEditor, { ...props });
+  if (TEXT_TYPES.has(column.type)) return /* @__PURE__ */ jsx(TextEditor, { ...props });
   return /* @__PURE__ */ jsx(LineEditor, { ...props });
 }
 function LineEditor({ column, value, context, seed, label, onCommit, onCancel, conflict }) {
@@ -166,10 +178,7 @@ function LineEditor({ column, value, context, seed, label, onCommit, onCancel, c
   const [draft, setDraft] = useState(initial);
   const [error, setError] = useState(null);
   useLayoutEffect(() => {
-    const el = input.current;
-    if (!el) return;
-    el.focus();
-    if (!isDate) el.setSelectionRange(el.value.length, el.value.length);
+    focusInPlace(input.current, !isDate);
   }, [isDate]);
   const commit = (move) => {
     const text = isDate && column.time && draft !== "" ? new Date(draft).toISOString() : draft;
@@ -226,18 +235,22 @@ function LineEditor({ column, value, context, seed, label, onCommit, onCancel, c
     ] }) : null
   ] });
 }
-function LongTextEditor({ column, value, context, seed, label, onCommit, onCancel, side = "below", conflict }) {
+function TextEditor({ column, value, context, seed, label, onCommit, onCancel, side = "below", conflict }) {
   const { labels } = context;
+  const long = column.type === "longtext";
   const errorId = useId();
   const area = useRef(null);
   const [draft, setDraft] = useState(() => seed ?? editText(column, value, context));
   const [error, setError] = useState(null);
   useLayoutEffect(() => {
-    const el = area.current;
-    if (!el) return;
-    el.focus();
-    el.setSelectionRange(el.value.length, el.value.length);
+    focusInPlace(area.current, true);
   }, []);
+  useLayoutEffect(() => {
+    const el = area.current;
+    if (!el || el.scrollHeight === 0) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [draft]);
   const commit = (move) => {
     const parsed = parseText(column, draft, context);
     if (!parsed.ok) {
@@ -251,43 +264,52 @@ function LongTextEditor({ column, value, context, seed, label, onCommit, onCance
   const leave = useLeave(() => {
     if (!commit(null)) onCancel();
   });
-  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-sheet-editor", "crewlet-sheet-editor--long", `crewlet-sheet-editor--${side}`), onBlur: leave.onBlur, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor__panel crewlet-sheet-editor__panel--long", children: [
-    /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        ref: area,
-        className: "crewlet-sheet-editor__textarea",
-        "aria-label": label,
-        "aria-invalid": error !== null,
-        "aria-describedby": error !== null ? errorId : void 0,
-        maxLength: textMax(column),
-        rows: 5,
-        value: draft,
-        onChange: (event) => {
-          setDraft(event.target.value);
-          setError(null);
-        },
-        onKeyDown: (event) => {
-          if (isComposing(event)) return;
-          if (event.key === "Escape") {
-            event.preventDefault();
-            event.stopPropagation();
-            leave.finish();
-            onCancel();
-            return;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx("crewlet-sheet-editor", "crewlet-sheet-editor--text", long && "crewlet-sheet-editor--long", `crewlet-sheet-editor--${side}`),
+      onBlur: leave.onBlur,
+      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor__overlay", children: [
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref: area,
+            className: "crewlet-sheet-editor__textarea",
+            "aria-label": label,
+            "aria-multiline": long,
+            "aria-invalid": error !== null,
+            "aria-describedby": error !== null ? errorId : void 0,
+            maxLength: textMax(column),
+            rows: 1,
+            style: { "--crewlet-sheet-editor-lines": TEXT_EDITOR_LINES },
+            value: draft,
+            onChange: (event) => {
+              setDraft(long ? event.target.value : event.target.value.replace(/\r?\n/g, " "));
+              setError(null);
+            },
+            onKeyDown: (event) => {
+              if (isComposing(event)) return;
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                leave.finish();
+                onCancel();
+                return;
+              }
+              if (event.key === "Tab" && conflict) return;
+              const move = endingMove(event, long);
+              if (move === void 0) return;
+              event.preventDefault();
+              event.stopPropagation();
+              commit(move);
+            }
           }
-          if (event.key === "Tab" && conflict) return;
-          const move = endingMove(event, true);
-          if (move === void 0) return;
-          event.preventDefault();
-          event.stopPropagation();
-          commit(move);
-        }
-      }
-    ),
-    error !== null ? /* @__PURE__ */ jsx(ErrorNote, { id: errorId, message: error }) : null,
-    conflict ? /* @__PURE__ */ jsx(ConflictNote, { conflict, labels }) : null
-  ] }) });
+        ),
+        error !== null ? /* @__PURE__ */ jsx(ErrorNote, { id: errorId, message: error }) : null,
+        conflict ? /* @__PURE__ */ jsx(ConflictNote, { conflict, labels }) : null
+      ] })
+    }
+  );
 }
 function choicesOf(column, context) {
   if (column.type === "person") return (context.people ?? []).map((person) => ({ id: person.id, label: person.name, person }));
@@ -298,34 +320,39 @@ function ChoiceFace({ column, choice, context }) {
   if (column.type === "status" && choice.option) return /* @__PURE__ */ jsx(StatusDot, { tone: statusTone(choice.option), children: choice.label });
   return /* @__PURE__ */ jsx(OptionChip, { column, id: choice.id, labels: context.labels });
 }
+var CLEAR = "";
 function ListEditor({ column, value, context, seed, label, onCommit, onCancel, side = "below", conflict }) {
   const { labels } = context;
   const multiple = column.type === "multiselect";
   const listId = useId();
   const errorId = useId();
   const filterRef = useRef(null);
-  const [filter, setFilter] = useState(seed ?? "");
+  const listRef = useRef(null);
+  const all = useMemo(() => choicesOf(column, context), [column, context]);
+  const filterable = all.length > LIST_FILTER_FROM;
+  const [filter, setFilter] = useState(filterable ? seed ?? "" : "");
   const [chosen, setChosen] = useState(
     () => multiple ? [...value ?? []] : typeof value === "string" ? [value] : []
   );
   const [error, setError] = useState(null);
-  const all = useMemo(() => choicesOf(column, context), [column, context]);
   const clearable = !multiple && !column.required;
   const shown = useMemo(() => {
     const wanted = filter.trim().toLowerCase();
     const matching = wanted === "" ? all : all.filter((choice) => choice.label.toLowerCase().includes(wanted));
-    return clearable && wanted === "" ? [{ id: "", label: labels.clear }, ...matching] : matching;
+    return clearable && wanted === "" ? [...matching, { id: CLEAR, label: labels.clear }] : matching;
   }, [all, filter, clearable, labels.clear]);
   const [highlight, setHighlight] = useState(() => {
-    const at = shown.findIndex((choice) => choice.id !== "" && chosen.includes(choice.id));
+    const typed = !filterable && seed ? shown.findIndex((choice) => choice.id !== CLEAR && choice.label.toLowerCase().startsWith(seed.toLowerCase())) : -1;
+    if (typed >= 0) return typed;
+    const at = shown.findIndex((choice) => choice.id !== CLEAR && chosen.includes(choice.id));
     return at >= 0 ? at : 0;
   });
   useEffect(() => {
     setHighlight((at) => Math.min(at, Math.max(shown.length - 1, 0)));
   }, [shown.length]);
   useLayoutEffect(() => {
-    filterRef.current?.focus();
-  }, []);
+    focusInPlace(filterable ? filterRef.current : listRef.current, false);
+  }, [filterable]);
   const finish = (next, move) => {
     const problem = checkValue(column, next, context);
     if (problem !== null) {
@@ -342,15 +369,76 @@ function ListEditor({ column, value, context, seed, label, onCommit, onCancel, s
   const pick = (choice, move) => {
     if (!choice) return;
     if (!multiple) {
-      finish(choice.id === "" ? null : choice.id, move);
+      finish(choice.id === CLEAR ? null : choice.id, move);
       return;
     }
     setError(null);
     setChosen((current) => current.includes(choice.id) ? current.filter((id) => id !== choice.id) : [...current, choice.id]);
   };
   const optionId = (index) => `${listId}-${index}`;
+  const active = shown.length > 0 ? optionId(highlight) : void 0;
+  const onListKeys = (event) => {
+    if (isComposing(event)) return;
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        leave.finish();
+        onCancel();
+        return;
+      case "ArrowDown":
+        event.preventDefault();
+        event.stopPropagation();
+        setHighlight((at) => Math.min(at + 1, shown.length - 1));
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        event.stopPropagation();
+        setHighlight((at) => Math.max(at - 1, 0));
+        return;
+      case "Home":
+      case "End":
+        if (filter !== "") return;
+        event.preventDefault();
+        event.stopPropagation();
+        setHighlight(event.key === "Home" ? 0 : shown.length - 1);
+        return;
+      case "Enter":
+        event.preventDefault();
+        event.stopPropagation();
+        if (multiple && isMod(event)) finish(chosen, "down");
+        else pick(shown[highlight], event.shiftKey ? "up" : "down");
+        return;
+      case " ":
+        if (filterable) return;
+        event.preventDefault();
+        event.stopPropagation();
+        pick(shown[highlight], multiple ? null : "down");
+        return;
+      case "Tab":
+        if (conflict) return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (multiple) finish(chosen, event.shiftKey ? "left" : "right");
+        else finish(value, event.shiftKey ? "left" : "right");
+        return;
+      default:
+        if (!filterable && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          const key = event.key.toLowerCase();
+          const from = highlight + 1;
+          const order = [...shown.slice(from), ...shown.slice(0, from)];
+          const hit = order.find((choice) => choice.id !== CLEAR && choice.label.toLowerCase().startsWith(key));
+          if (hit) {
+            event.preventDefault();
+            event.stopPropagation();
+            setHighlight(shown.indexOf(hit));
+          }
+        }
+        return;
+    }
+  };
   return /* @__PURE__ */ jsx("div", { className: cx("crewlet-sheet-editor", "crewlet-sheet-editor--list", `crewlet-sheet-editor--${side}`), onBlur: leave.onBlur, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor__panel crewlet-sheet-editor__panel--list", children: [
-    /* @__PURE__ */ jsx(
+    filterable ? /* @__PURE__ */ jsx(
       "input",
       {
         ref: filterRef,
@@ -360,7 +448,7 @@ function ListEditor({ column, value, context, seed, label, onCommit, onCancel, s
         "aria-expanded": "true",
         "aria-controls": listId,
         "aria-autocomplete": "list",
-        "aria-activedescendant": shown.length > 0 ? optionId(highlight) : void 0,
+        "aria-activedescendant": active,
         "aria-invalid": error !== null,
         "aria-describedby": error !== null ? errorId : void 0,
         placeholder: labels.filter,
@@ -369,78 +457,53 @@ function ListEditor({ column, value, context, seed, label, onCommit, onCancel, s
           setFilter(event.target.value);
           setHighlight(0);
         },
-        onKeyDown: (event) => {
-          if (isComposing(event)) return;
-          switch (event.key) {
-            case "Escape":
-              event.preventDefault();
-              event.stopPropagation();
-              leave.finish();
-              onCancel();
-              return;
-            case "ArrowDown":
-              event.preventDefault();
-              event.stopPropagation();
-              setHighlight((at) => Math.min(at + 1, shown.length - 1));
-              return;
-            case "ArrowUp":
-              event.preventDefault();
-              event.stopPropagation();
-              setHighlight((at) => Math.max(at - 1, 0));
-              return;
-            case "Home":
-            case "End":
-              if (filter !== "") return;
-              event.preventDefault();
-              event.stopPropagation();
-              setHighlight(event.key === "Home" ? 0 : shown.length - 1);
-              return;
-            case "Enter":
-              event.preventDefault();
-              event.stopPropagation();
-              if (multiple && isMod(event)) finish(chosen, "down");
-              else pick(shown[highlight], event.shiftKey ? "up" : "down");
-              return;
-            case "Tab":
-              if (conflict) return;
-              event.preventDefault();
-              event.stopPropagation();
-              if (multiple) finish(chosen, event.shiftKey ? "left" : "right");
-              else finish(value, event.shiftKey ? "left" : "right");
-              return;
-            default:
-              return;
-          }
-        }
+        onKeyDown: onListKeys
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listRef,
+        className: "crewlet-sheet-editor__list",
+        id: listId,
+        role: "listbox",
+        "aria-label": label,
+        "aria-multiselectable": multiple || void 0,
+        tabIndex: -1,
+        "aria-activedescendant": filterable ? void 0 : active,
+        "aria-invalid": filterable ? void 0 : error !== null,
+        "aria-describedby": !filterable && error !== null ? errorId : void 0,
+        onKeyDown: filterable ? void 0 : onListKeys,
+        children: shown.length === 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-sheet-editor__empty", role: "presentation", children: labels.noOptions }) : shown.map((choice, index) => {
+          const selected = choice.id === CLEAR ? chosen.length === 0 : chosen.includes(choice.id);
+          return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- focus stays on the combobox or the list, whose keys move and pick through aria-activedescendant
+            /* @__PURE__ */ jsxs(
+              "li",
+              {
+                id: optionId(index),
+                role: "option",
+                "aria-selected": selected,
+                className: cx(
+                  "crewlet-sheet-editor__option",
+                  choice.id === CLEAR && "crewlet-sheet-editor__option--clear",
+                  index === highlight && "crewlet-sheet-editor__option--highlight",
+                  selected && "crewlet-sheet-editor__option--selected"
+                ),
+                onMouseDown: (event) => event.preventDefault(),
+                onMouseEnter: () => setHighlight(index),
+                onClick: () => pick(choice, multiple ? null : "down"),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-editor__mark", "aria-hidden": "true", children: selected && choice.id !== CLEAR ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs" }) : null }),
+                  choice.id === CLEAR ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__muted", children: choice.label }) : /* @__PURE__ */ jsx(ChoiceFace, { column, choice, context })
+                ]
+              },
+              choice.id === CLEAR ? "\0clear" : choice.id
+            )
+          );
+        })
       }
     ),
-    /* @__PURE__ */ jsx("ul", { className: "crewlet-sheet-editor__list", id: listId, role: "listbox", "aria-label": label, "aria-multiselectable": multiple || void 0, children: shown.length === 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-sheet-editor__empty", role: "presentation", children: labels.noOptions }) : shown.map((choice, index) => {
-      const selected = choice.id === "" ? chosen.length === 0 : chosen.includes(choice.id);
-      return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- focus stays on the combobox, whose keys move and pick through aria-activedescendant
-        /* @__PURE__ */ jsxs(
-          "li",
-          {
-            id: optionId(index),
-            role: "option",
-            "aria-selected": selected,
-            className: cx(
-              "crewlet-sheet-editor__option",
-              index === highlight && "crewlet-sheet-editor__option--highlight",
-              selected && "crewlet-sheet-editor__option--selected"
-            ),
-            onMouseDown: (event) => event.preventDefault(),
-            onMouseEnter: () => setHighlight(index),
-            onClick: () => pick(choice, multiple ? null : "down"),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-editor__mark", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs" }) : null }),
-              choice.id === "" ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__muted", children: choice.label }) : /* @__PURE__ */ jsx(ChoiceFace, { column, choice, context })
-            ]
-          },
-          choice.id === "" ? "\0clear" : choice.id
-        )
-      );
-    }) }),
     error !== null ? /* @__PURE__ */ jsx(ErrorNote, { id: errorId, message: error }) : null,
     conflict ? /* @__PURE__ */ jsx(ConflictNote, { conflict, labels }) : null
   ] }) });
@@ -572,6 +635,9 @@ function SheetGrid({
   sync,
   onRetry,
   height,
+  fit = "container",
+  onDeleteRow,
+  onDismissRefused,
   locale,
   className,
   labels: labelOverrides,
@@ -584,6 +650,7 @@ function SheetGrid({
   const columns = useMemo(() => drawnColumns(declared), [declared]);
   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 scroller = useRef(null);
   const probe = useRef(null);
   const grid = useRef(null);
@@ -599,7 +666,23 @@ function SheetGrid({
   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());
+  useEffect(() => {
+    const now = /* @__PURE__ */ new Map();
+    for (const row of given) {
+      for (const [field, reason] of Object.entries(row.refused ?? {})) now.set(cellKey(row.id, field), reason);
+    }
+    for (const [key, reason] of now) {
+      if (heardRefusals.current.get(key) !== reason) {
+        say(labels.notSaved(reason));
+        break;
+      }
+    }
+    heardRefusals.current = now;
+  }, [given, labels, say]);
   useLayoutEffect(() => {
     const measure = () => {
       const row = probe.current?.offsetHeight ?? 0;
@@ -617,7 +700,10 @@ function SheetGrid({
   }, []);
   const offsets = useMemo(() => columnOffsets(columns), [columns]);
   const template = useMemo(
-    () => [`${SHEET_ROW_NUMBER_WIDTH}px`, ...columns.map((column) => `${columnWidth(column)}px`)].join(" "),
+    () => [
+      `${SHEET_ROW_NUMBER_WIDTH}px`,
+      ...columns.map((column, index) => index === columns.length - 1 ? `minmax(${columnWidth(column)}px, 1fr)` : `${columnWidth(column)}px`)
+    ].join(" "),
     [columns]
   );
   const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + columnWidth(column), SHEET_ROW_NUMBER_WIDTH), [columns]);
@@ -893,6 +979,11 @@ function SheetGrid({
       focusCell();
       return;
     }
+    if (rowActions && currentCell.rowId !== null && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
+      event.preventDefault();
+      setRowMenu(currentCell.rowId);
+      return;
+    }
     const moved = moveFrom(current, event, { rows: rows.length, cols: columns.length, page });
     if (moved) {
       event.preventDefault();
@@ -1007,19 +1098,21 @@ function SheetGrid({
     "--crewlet-sheet-row-height": `${rowHeight}px`,
     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 side = (rowAt) => {
     const top = headerHeight + rowAt * rowHeight - scrollTop;
     const view = viewport > 0 ? viewport : rowHeight * 12;
     return editorSide(top, top + rowHeight, headerHeight, view, rowHeight * 8);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-grid", mode === "read" && "crewlet-sheet-grid--read", className), children: [
+  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(
       "div",
       {
         ref: scroller,
         className: "crewlet-sheet-grid__scroller",
-        style: height !== void 0 ? { height: `${height}px` } : void 0,
+        style: scrollerStyle,
         onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
         children: /* @__PURE__ */ jsxs(
           "div",
@@ -1036,6 +1129,11 @@ function SheetGrid({
             className: "crewlet-sheet-grid__grid",
             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,
@@ -1089,6 +1187,7 @@ function SheetGrid({
                     "aria-rowindex": index + 2,
                     className: "crewlet-sheet-grid__row",
                     style: { top: `${index * rowHeight}px` },
+                    "data-row-id": row.id,
                     children: [
                       /* @__PURE__ */ jsxs(
                         "div",
@@ -1098,7 +1197,26 @@ function SheetGrid({
                           className: cx("crewlet-sheet-grid__rownum", 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) })
+                            /* @__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(
+                              Menu,
+                              {
+                                label: labels.rowActions(index + 1),
+                                icon: /* @__PURE__ */ jsx(EllipsisGlyph, { size: "xs" }),
+                                triggerTabIndex: -1,
+                                open: rowMenu === row.id,
+                                onOpenChange: (open) => setRowMenu(open ? row.id : null),
+                                items: [
+                                  {
+                                    key: "delete",
+                                    label: labels.deleteRow,
+                                    icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                                    danger: true,
+                                    onSelect: () => onDeleteRow?.(row.id)
+                                  }
+                                ]
+                              }
+                            ) }) : null
                           ]
                         }
                       ),
@@ -1212,14 +1330,24 @@ function SheetGrid({
       }
     ),
     /* @__PURE__ */ jsx(VisuallyHidden, { id: describedId, children: description }),
-    /* @__PURE__ */ jsx(VisuallyHidden, { id: helpId, children: labels.keyboardHelp }),
+    /* @__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) }) }),
     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,
-      sync ? /* @__PURE__ */ jsxs("span", { className: cx("crewlet-sheet-grid__sync", (sync.failed ?? 0) > 0 && "crewlet-sheet-grid__sync--failed"), children: [
-        /* @__PURE__ */ jsx("span", { children: labels.sync(sync) }),
-        (sync.failed ?? 0) > 0 && onRetry ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onRetry, children: labels.retry }) : null
-      ] }) : null
+      sync ? /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cx(
+            "crewlet-sheet-grid__sync",
+            ((sync.failed ?? 0) > 0 || !sync.offline && (sync.refused ?? 0) > 0) && "crewlet-sheet-grid__sync--failed"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { children: labels.sync(sync) }),
+            (sync.failed ?? 0) > 0 && onRetry ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onRetry, children: labels.retry }) : null,
+            (sync.failed ?? 0) === 0 && (sync.refused ?? 0) > 0 && onDismissRefused ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismissRefused, children: labels.dismiss }) : null
+          ]
+        }
+      ) : null
     ] }) : null
   ] });
 }

package/dist/{chunk-F6NZOVWL.js → chunk-IW55G7XG.js}

@@ -13,13 +13,17 @@ function useDownload(options = {}) {
   return { state, attempt: outcome.attempt, download };
 }
 function downloadText(text, filename, mime = DEFAULT_MIME) {
+  if (typeof Blob === "undefined") return { started: false, name: safeFilename(filename) };
+  return downloadBlob(new Blob([text], { type: mime }), filename);
+}
+function downloadBlob(blob, filename) {
   const name = safeFilename(filename);
   if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function" || typeof HTMLAnchorElement === "undefined" || !("download" in HTMLAnchorElement.prototype)) {
     return { started: false, name };
   }
   let url = "";
   try {
-    url = URL.createObjectURL(new Blob([text], { type: mime }));
+    url = URL.createObjectURL(blob);
     const link = document.createElement("a");
     link.href = url;
     link.download = name;
@@ -65,4 +69,4 @@ function safeFilename(name) {
   return cutToBytes(stem, MAX_FILENAME - bytes(extension)) + extension;
 }
 
-export { downloadText, safeFilename, useDownload };
+export { downloadBlob, downloadText, safeFilename, useDownload };