@crewlethq/ui 0.17.0 → 0.18.0

package/dist/chunk-FYXRWBJJ.js

@@ -0,0 +1,1235 @@
+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-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 { Button } from './chunk-OG6CL3EB.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { Avatar } from './chunk-5OM447RW.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SheetGrid-4HOXDVIB.css';
+import { useId, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
+import { CheckGlyph, StarGlyph, CircleAlertGlyph, ArrowUpGlyph, ArrowDownGlyph, RotateCcwClockGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
+import { isCrewletCharacter } from '@crewlethq/icons/characters';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function OptionChip({ column, id, labels }) {
+  const option = findOption(column, id);
+  if (!option) return /* @__PURE__ */ jsx(Tag, { size: "xs", children: id });
+  if (option.archived) {
+    return /* @__PURE__ */ jsx(Tag, { size: "xs", appearance: "outline", children: labels.archived(option.label) });
+  }
+  const hue = optionHue(option.color);
+  return /* @__PURE__ */ jsx(Tag, { size: "xs", hue: hue === "neutral" ? void 0 : hue, children: option.label });
+}
+function PersonBadge({ person, fallback }) {
+  if (!person) return /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__muted", children: fallback });
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-sheet-cell__person", children: [
+    /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        name: person.name,
+        kind: person.kind === "human" ? "human" : "agent",
+        src: person.src,
+        character: person.character !== void 0 && isCrewletCharacter(person.character) ? person.character : void 0,
+        hue: person.kind === "agent" ? person.hue : void 0,
+        size: "xs",
+        decorative: true
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__text", children: person.name })
+  ] });
+}
+function CellDisplay({ column, value, context, onOpenLink }) {
+  const { labels } = context;
+  if (column.type === "checkbox") {
+    const on = value === true;
+    return /* @__PURE__ */ jsxs("span", { className: "crewlet-sheet-cell__checkbox", children: [
+      /* @__PURE__ */ jsx("span", { className: cx("crewlet-sheet-cell__check", on && "crewlet-sheet-cell__check--on"), "aria-hidden": "true", children: on ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs" }) : null }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: on ? labels.checked : labels.unchecked })
+    ] });
+  }
+  if (isEmptyValue(value)) return /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.empty });
+  switch (column.type) {
+    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)) });
+    case "status": {
+      const option = findOption(column, String(value));
+      const words = displayText(column, value, context);
+      return /* @__PURE__ */ jsx(StatusDot, { tone: option && !option.archived ? statusTone(option) : "neutral", children: words });
+    }
+    case "person":
+      return /* @__PURE__ */ jsx(PersonBadge, { person: findPerson(context.people, String(value)), fallback: labels.unknownPerson });
+    case "rating": {
+      const max = ratingMax(column);
+      const stars = Number(value);
+      return /* @__PURE__ */ jsxs("span", { className: "crewlet-sheet-cell__rating", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__stars", "aria-hidden": "true", children: Array.from({ length: max }, (_, index) => /* @__PURE__ */ jsx(StarGlyph, { size: "sm", filled: index < stars, className: cx("crewlet-sheet-cell__star", index < stars && "crewlet-sheet-cell__star--on") }, index)) }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.rating(stars, max) })
+      ] });
+    }
+    case "url": {
+      const url = String(value);
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "crewlet-sheet-cell__link",
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          tabIndex: -1,
+          onClick: onOpenLink ? (event) => {
+            event.preventDefault();
+            onOpenLink(url);
+          } : void 0,
+          children: url
+        }
+      );
+    }
+    case "number":
+      return /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__text crewlet-sheet-cell__number", children: displayText(column, value, context) });
+    default:
+      return /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cell__text", children: displayText(column, value, context) });
+  }
+}
+var LINE_TYPES = /* @__PURE__ */ new Set(["text", "number", "url", "date", "rating"]);
+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;
+    return event.shiftKey ? "up" : "down";
+  }
+  return void 0;
+}
+function useLeave(end) {
+  const done = useRef(false);
+  return {
+    finish: () => {
+      done.current = true;
+    },
+    onBlur: (event) => {
+      if (done.current) return;
+      const next = event.relatedTarget;
+      if (next !== null && event.currentTarget.contains(next)) return;
+      done.current = true;
+      end();
+    }
+  };
+}
+function localDateTime(value) {
+  const at = new Date(value);
+  if (Number.isNaN(at.getTime())) return "";
+  const pad = (n) => String(n).padStart(2, "0");
+  return `${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}T${pad(at.getHours())}:${pad(at.getMinutes())}`;
+}
+function ConflictNote({ conflict, labels }) {
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor__conflict", role: "alert", children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-sheet-editor__conflict-text", children: labels.conflict(conflict.writer, conflict.value) }),
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor__conflict-actions", children: [
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: conflict.onKeepMine, children: labels.keepMine }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: conflict.onUseTheirs, children: labels.useTheirs(conflict.writer) })
+    ] })
+  ] });
+}
+function ErrorNote({ id, message }) {
+  return /* @__PURE__ */ jsxs("p", { id, className: "crewlet-sheet-editor__error", children: [
+    /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: 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 });
+  return /* @__PURE__ */ jsx(LineEditor, { ...props });
+}
+function LineEditor({ column, value, context, seed, label, onCommit, onCancel, conflict }) {
+  const { labels } = context;
+  const errorId = useId();
+  const input = useRef(null);
+  const isDate = column.type === "date";
+  const initial = useMemo(() => {
+    if (isDate) {
+      const text = typeof value === "string" ? value : "";
+      return column.time ? localDateTime(text) : text;
+    }
+    return seed ?? editText(column, value, context);
+  }, []);
+  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);
+  }, [isDate]);
+  const commit = (move) => {
+    const text = isDate && column.time && draft !== "" ? new Date(draft).toISOString() : draft;
+    const parsed = parseText(column, text, context);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return false;
+    }
+    leave.finish();
+    onCommit(parsed.value, move);
+    return true;
+  };
+  const leave = useLeave(() => {
+    if (!commit(null)) onCancel();
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-sheet-editor crewlet-sheet-editor--line", onBlur: leave.onBlur, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: input,
+        className: "crewlet-sheet-editor__input",
+        type: isDate ? column.time ? "datetime-local" : "date" : column.type === "url" ? "url" : "text",
+        inputMode: column.type === "number" ? "decimal" : column.type === "rating" ? "numeric" : void 0,
+        "aria-label": label,
+        "aria-invalid": error !== null,
+        "aria-describedby": error !== null ? errorId : void 0,
+        maxLength: column.type === "text" ? textMax(column) : void 0,
+        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;
+          }
+          if (event.key === "Tab" && conflict) return;
+          const move = endingMove(event, false);
+          if (move === void 0) return;
+          event.preventDefault();
+          event.stopPropagation();
+          commit(move);
+        }
+      }
+    ),
+    error !== null || conflict ? /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-editor__panel"), children: [
+      error !== null ? /* @__PURE__ */ jsx(ErrorNote, { id: errorId, message: error }) : null,
+      conflict ? /* @__PURE__ */ jsx(ConflictNote, { conflict, labels }) : null
+    ] }) : null
+  ] });
+}
+function LongTextEditor({ column, value, context, seed, label, onCommit, onCancel, side = "below", conflict }) {
+  const { labels } = context;
+  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);
+  }, []);
+  const commit = (move) => {
+    const parsed = parseText(column, draft, context);
+    if (!parsed.ok) {
+      setError(parsed.error);
+      return false;
+    }
+    leave.finish();
+    onCommit(parsed.value, move);
+    return true;
+  };
+  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;
+          }
+          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
+  ] }) });
+}
+function choicesOf(column, context) {
+  if (column.type === "person") return (context.people ?? []).map((person) => ({ id: person.id, label: person.name, person }));
+  return liveOptions(column).map((option) => ({ id: option.id, label: option.label, option }));
+}
+function ChoiceFace({ column, choice, context }) {
+  if (choice.person) return /* @__PURE__ */ jsx(PersonBadge, { person: choice.person, fallback: choice.label });
+  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 });
+}
+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 [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;
+  }, [all, filter, clearable, labels.clear]);
+  const [highlight, setHighlight] = useState(() => {
+    const at = shown.findIndex((choice) => choice.id !== "" && 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();
+  }, []);
+  const finish = (next, move) => {
+    const problem = checkValue(column, next, context);
+    if (problem !== null) {
+      setError(problem);
+      return false;
+    }
+    leave.finish();
+    onCommit(next, move);
+    return true;
+  };
+  const leave = useLeave(() => {
+    if (!multiple || !finish(chosen, null)) onCancel();
+  });
+  const pick = (choice, move) => {
+    if (!choice) return;
+    if (!multiple) {
+      finish(choice.id === "" ? 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}`;
+  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(
+      "input",
+      {
+        ref: filterRef,
+        className: "crewlet-sheet-editor__filter",
+        role: "combobox",
+        "aria-label": label,
+        "aria-expanded": "true",
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": shown.length > 0 ? optionId(highlight) : void 0,
+        "aria-invalid": error !== null,
+        "aria-describedby": error !== null ? errorId : void 0,
+        placeholder: labels.filter,
+        value: filter,
+        onChange: (event) => {
+          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;
+          }
+        }
+      }
+    ),
+    /* @__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
+  ] }) });
+}
+function SheetCell({
+  label,
+  type,
+  value: raw,
+  onChange,
+  readOnly = false,
+  options,
+  people,
+  column: settings,
+  pending = false,
+  refused,
+  locale,
+  className,
+  labels: overrides
+}) {
+  const labels = useMemo(() => sheetLabels(overrides), [overrides]);
+  const column = useMemo(() => ({ ...settings, field: label, label, type, options }), [settings, label, type, options]);
+  const context = useMemo(() => ({ people, locale, labels }), [people, locale, labels]);
+  const value = normalizeValue(column, raw);
+  const editable = onChange !== void 0 && !readOnly && !column.readOnly;
+  const [editing, setEditing] = useState(false);
+  const statusId = useId();
+  const face = useRef(null);
+  const returnFocus = useRef(false);
+  useEffect(() => {
+    if (!editing && returnFocus.current) {
+      returnFocus.current = false;
+      face.current?.focus();
+    }
+  }, [editing]);
+  const status = refused !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-sheet-cell__refusal", children: [
+    /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children: refused })
+  ] }) : pending ? /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.saving }) : null;
+  const classes = cx("crewlet-sheet-cell", pending && "crewlet-sheet-cell--pending", refused !== void 0 && "crewlet-sheet-cell--refused", className);
+  if (type === "checkbox") {
+    return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "checkbox",
+          "aria-checked": value === true,
+          "aria-label": label,
+          "aria-readonly": !editable || void 0,
+          "aria-describedby": status !== null ? statusId : void 0,
+          className: "crewlet-sheet-cell__face",
+          onClick: () => {
+            if (editable) onChange?.(value !== true);
+          },
+          children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context })
+        }
+      ),
+      status !== null ? /* @__PURE__ */ jsx("span", { id: statusId, children: status }) : null
+    ] });
+  }
+  if (editing) {
+    return /* @__PURE__ */ jsx("span", { className: cx(classes, "crewlet-sheet-cell--editing"), children: /* @__PURE__ */ jsx(
+      CellEditor,
+      {
+        column,
+        value,
+        context,
+        label,
+        onCommit: (next, _move) => {
+          returnFocus.current = true;
+          setEditing(false);
+          if (!sameValue(next, value)) onChange?.(next);
+        },
+        onCancel: () => {
+          returnFocus.current = true;
+          setEditing(false);
+        }
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: classes, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: face,
+        type: "button",
+        className: "crewlet-sheet-cell__face",
+        "aria-label": `${label}: ${spokenText(column, value, context)}`,
+        "aria-describedby": status !== null ? statusId : void 0,
+        "aria-disabled": !editable || void 0,
+        onClick: () => {
+          if (editable) setEditing(true);
+        },
+        children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context })
+      }
+    ),
+    status !== null ? /* @__PURE__ */ jsx("span", { id: statusId, children: status }) : null
+  ] });
+}
+var CheckboxCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "checkbox" });
+var TextCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "text" });
+var LongTextCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "longtext" });
+var NumberCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "number" });
+var SelectCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "select" });
+var MultiSelectCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "multiselect" });
+var PersonCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "person" });
+var StatusCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "status" });
+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;
+function SheetGrid({
+  label,
+  columns: declared,
+  rows: given,
+  people,
+  mode = "edit",
+  onEdit,
+  onAddRow,
+  onShowHistory,
+  onActiveCellChange,
+  onEditingChange,
+  onUndo,
+  onRedo,
+  onOpenLink,
+  presence,
+  sort,
+  onSortChange,
+  sync,
+  onRetry,
+  height,
+  locale,
+  className,
+  labels: labelOverrides,
+  presenceLabels: presenceOverrides
+}) {
+  const id = useId();
+  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 rows = useMemo(() => sortRows(columns, given, sort, context), [columns, given, sort, context]);
+  const editable = mode === "edit" && onEdit !== void 0;
+  const scroller = useRef(null);
+  const probe = useRef(null);
+  const grid = useRef(null);
+  const [focusRequest, setFocusRequest] = useState(0);
+  const handledFocus = useRef(0);
+  const [rowHeight, setRowHeight] = useState(SHEET_ROW_HEIGHT);
+  const [headerHeight, setHeaderHeight] = useState(SHEET_ROW_HEIGHT);
+  const [viewport, setViewport] = useState(0);
+  const [scrollTop, setScrollTop] = useState(0);
+  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 say = useCallback((text) => setAnnouncement((current2) => ({ text, n: current2.n + 1 })), []);
+  useLayoutEffect(() => {
+    const measure = () => {
+      const row = probe.current?.offsetHeight ?? 0;
+      if (row > 0) setRowHeight(row);
+      const head = grid.current?.querySelector(".crewlet-sheet-grid__row--head")?.offsetHeight ?? 0;
+      if (head > 0) setHeaderHeight(head);
+      setViewport(scroller.current?.clientHeight ?? 0);
+    };
+    measure();
+    if (typeof ResizeObserver !== "function") return void 0;
+    const observer = new ResizeObserver(measure);
+    if (scroller.current) observer.observe(scroller.current);
+    if (probe.current) observer.observe(probe.current);
+    return () => observer.disconnect();
+  }, []);
+  const offsets = useMemo(() => columnOffsets(columns), [columns]);
+  const template = useMemo(
+    () => [`${SHEET_ROW_NUMBER_WIDTH}px`, ...columns.map((column) => `${columnWidth(column)}px`)].join(" "),
+    [columns]
+  );
+  const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + columnWidth(column), SHEET_ROW_NUMBER_WIDTH), [columns]);
+  const frozenEdge = useMemo(() => {
+    let edge = SHEET_ROW_NUMBER_WIDTH;
+    columns.forEach((column, index) => {
+      if (column.frozen) edge = (offsets[index] ?? edge) + columnWidth(column);
+    });
+    return edge;
+  }, [columns, offsets]);
+  const rowIndex = useMemo(() => new Map(rows.map((row, index) => [row.id, index])), [rows]);
+  const colIndex = useMemo(() => new Map(columns.map((column, index) => [column.field, index])), [columns]);
+  const positionOf = useCallback(
+    (cell) => {
+      if (!cell) return null;
+      const col = colIndex.get(cell.field);
+      if (col === void 0) return null;
+      if (cell.rowId === null) return { row: HEADER, col };
+      const row = rowIndex.get(cell.rowId);
+      return row === void 0 ? null : { row, col };
+    },
+    [colIndex, rowIndex]
+  );
+  const cellAt = useCallback(
+    (position) => {
+      const column = columns[position.col];
+      if (!column) return null;
+      if (position.row === HEADER) return { rowId: null, field: column.field };
+      const row = rows[position.row];
+      return row ? { rowId: row.id, field: column.field } : null;
+    },
+    [columns, rows]
+  );
+  const fallback = rows.length > 0 && columns.length > 0 ? { rowId: rows[0].id, field: columns[0].field } : columns.length > 0 ? { rowId: null, field: columns[0].field } : null;
+  const current = positionOf(active) ?? positionOf(fallback);
+  const currentCell = current ? cellAt(current) : null;
+  const anchorPosition = positionOf(anchor) ?? current;
+  const range = current && anchorPosition && current.row !== HEADER ? rangeOf(anchorPosition, current) : null;
+  const onCells = useMemo(() => presenceByCell(presence), [presence]);
+  const onRows = useMemo(() => presenceByRow(presence), [presence]);
+  const onColumns = useMemo(() => presenceByColumn(presence), [presence]);
+  const reportedActive = useRef(null);
+  useEffect(() => {
+    const cell = currentCell && currentCell.rowId !== null ? { rowId: currentCell.rowId, field: currentCell.field } : null;
+    const key = cell ? cellKey(cell.rowId, cell.field) : null;
+    if (key === reportedActive.current) return;
+    reportedActive.current = key;
+    onActiveCellChange?.(cell);
+  }, [currentCell, onActiveCellChange]);
+  const reportedEditing = useRef(null);
+  useEffect(() => {
+    const key = editing ? cellKey(editing.rowId, editing.field) : null;
+    if (key === reportedEditing.current) return;
+    reportedEditing.current = key;
+    onEditingChange?.(editing ? { rowId: editing.rowId, field: editing.field } : null);
+  }, [editing, onEditingChange]);
+  const refuseLocally = useCallback(
+    (refusals) => {
+      if (refusals.length === 0) return;
+      setLocal((before) => {
+        const next = new Map(before);
+        for (const refusal of refusals) next.set(cellKey(refusal.rowId, refusal.field), refusal.error);
+        return next;
+      });
+      say(refusals[0].error);
+    },
+    [say]
+  );
+  const clearLocal = useCallback((keys) => {
+    setLocal((before) => {
+      if (!keys.some((key) => before.has(key))) return before;
+      const next = new Map(before);
+      for (const key of keys) next.delete(key);
+      return next;
+    });
+  }, []);
+  const emit = useCallback(
+    (edits) => {
+      if (edits.length === 0 || !onEdit) return;
+      clearLocal(edits.map((edit) => cellKey(edit.rowId, edit.field)));
+      onEdit(edits);
+    },
+    [onEdit, clearLocal]
+  );
+  const columnOf = useCallback((field) => columns[colIndex.get(field) ?? -1], [columns, colIndex]);
+  const rowOf = useCallback((rowId) => rows[rowIndex.get(rowId) ?? -1], [rows, rowIndex]);
+  const cellEditable = useCallback(
+    (column) => editable && column !== void 0 && !column.readOnly,
+    [editable]
+  );
+  const focusCell = useCallback(() => setFocusRequest((n) => n + 1), []);
+  const moveTo = useCallback(
+    (cell, extend = false) => {
+      if (!cell) return;
+      setActive(cell);
+      if (!extend) setAnchor(cell);
+      focusCell();
+    },
+    [focusCell]
+  );
+  const onCellFocus = (cell) => {
+    if (active && active.rowId === cell.rowId && active.field === cell.field) return;
+    setActive(cell);
+    setAnchor(cell);
+  };
+  const activeRow = current?.row ?? null;
+  const activeCol = current?.col ?? null;
+  useLayoutEffect(() => {
+    if (activeRow === null || activeCol === null) return;
+    const box = scroller.current;
+    if (box && activeRow >= 0) {
+      const top = scrollToRow(activeRow, box.scrollTop, box.clientHeight, rowHeight, headerHeight);
+      if (top !== box.scrollTop) {
+        box.scrollTop = top;
+        setScrollTop(top);
+      }
+      const column = columns[activeCol];
+      if (column && !column.frozen) {
+        const left = offsets[activeCol] ?? 0;
+        const right = left + columnWidth(column);
+        if (left - frozenEdge < box.scrollLeft) box.scrollLeft = Math.max(left - frozenEdge, 0);
+        else if (right > box.scrollLeft + box.clientWidth) box.scrollLeft = right - box.clientWidth;
+      }
+    }
+    if (focusRequest === handledFocus.current || editing) return;
+    handledFocus.current = focusRequest;
+    document.getElementById(cellDomId(id, { row: activeRow, col: activeCol }))?.focus({ preventScroll: true });
+  }, [activeRow, activeCol, focusRequest, editing, id, rowHeight, headerHeight, columns, offsets, frozenEdge]);
+  const beginEdit = useCallback(
+    (cell, seed) => {
+      if (cell.rowId === null) return;
+      const column = columnOf(cell.field);
+      const row = rowOf(cell.rowId);
+      if (!row || !column) return;
+      if (!cellEditable(column)) {
+        say(editable ? labels.readOnly(column.label) : labels.forbidden);
+        return;
+      }
+      if (!hasEditor(column.type)) return;
+      clearLocal([cellKey(cell.rowId, cell.field)]);
+      setEditing({ rowId: cell.rowId, field: cell.field, seed, base: normalizeValue(column, row.values[column.field]) });
+    },
+    [cellEditable, clearLocal, columnOf, editable, labels, rowOf, say]
+  );
+  const toggle = useCallback(
+    (cell) => {
+      if (cell.rowId === null) return;
+      const column = columnOf(cell.field);
+      const row = rowOf(cell.rowId);
+      if (!row || !column || column.type !== "checkbox") return;
+      if (!cellEditable(column)) {
+        say(editable ? labels.readOnly(column.label) : labels.forbidden);
+        return;
+      }
+      emit([{ rowId: row.id, field: column.field, value: normalizeValue(column, row.values[column.field]) !== true }]);
+    },
+    [cellEditable, columnOf, editable, emit, labels, rowOf, say]
+  );
+  const stepFrom = useCallback(
+    (at, move) => {
+      if (move === null) return cellAt(at);
+      const next = {
+        down: { row: Math.min(at.row + 1, rows.length - 1), col: at.col },
+        up: { row: Math.max(at.row - 1, 0), col: at.col },
+        right: { row: at.row, col: Math.min(at.col + 1, columns.length - 1) },
+        left: { row: at.row, col: Math.max(at.col - 1, 0) }
+      }[move];
+      return cellAt(next);
+    },
+    [cellAt, columns.length, rows.length]
+  );
+  const endEdit = useCallback(
+    (value, move) => {
+      if (!editing) return;
+      const position = positionOf({ rowId: editing.rowId, field: editing.field });
+      const column = columnOf(editing.field);
+      const row = rowOf(editing.rowId);
+      setEditing(null);
+      if (value !== void 0 && column && row && !sameValue(value, normalizeValue(column, row.values[column.field]))) {
+        emit([{ rowId: row.id, field: column.field, value }]);
+      }
+      const holder = document.activeElement;
+      const editorHadFocus = holder !== null && holder !== document.body && Boolean(grid.current?.contains(holder));
+      if (position && editorHadFocus) moveTo(stepFrom(position, move));
+    },
+    [columnOf, editing, emit, moveTo, positionOf, rowOf, stepFrom]
+  );
+  useEffect(() => {
+    if (editing && !rowIndex.has(editing.rowId)) setEditing(null);
+  }, [editing, rowIndex]);
+  const editingRow = editing ? rowOf(editing.rowId) : void 0;
+  const editingColumn = editing ? columnOf(editing.field) : void 0;
+  const remote = editing && editingRow && editingColumn ? normalizeValue(editingColumn, editingRow.values[editingColumn.field]) : null;
+  const conflicted = Boolean(editing && editingRow && editingColumn && !sameValue(remote, editing.base));
+  const writer = conflicted && editing ? editingRow?.changed?.[editing.field]?.by ?? labels.someone : "";
+  const conflict = conflicted && editing && editingColumn ? {
+    writer,
+    value: displayText(editingColumn, remote, context) || labels.empty,
+    onKeepMine: () => setEditing((now) => now ? { ...now, base: remote } : now),
+    onUseTheirs: () => {
+      const position = positionOf({ rowId: editing.rowId, field: editing.field });
+      setEditing(null);
+      if (position) moveTo(cellAt(position));
+    }
+  } : null;
+  const conflictText = conflict ? labels.conflict(conflict.writer, conflict.value) : "";
+  useEffect(() => {
+    if (conflictText) say(conflictText);
+  }, [conflictText, say]);
+  const onCopy = (event) => {
+    if (editing || !range) return;
+    event.preventDefault();
+    event.clipboardData.setData("text/plain", toTSV(columns, rows, range, context));
+  };
+  const clearRange = useCallback(() => {
+    if (!range) return;
+    if (!editable) {
+      say(labels.forbidden);
+      return;
+    }
+    const plan = planClear(columns, rows, range, context);
+    emit(plan.edits);
+    refuseLocally(plan.refused);
+  }, [columns, context, editable, emit, labels.forbidden, range, refuseLocally, rows, say]);
+  const onCut = (event) => {
+    if (editing || !range) return;
+    onCopy(event);
+    clearRange();
+  };
+  const onPaste = (event) => {
+    if (editing || !range) return;
+    event.preventDefault();
+    if (!editable) {
+      say(labels.forbidden);
+      return;
+    }
+    const plan = planPaste(columns, rows, range, parseTSV(event.clipboardData.getData("text/plain")), context);
+    emit(plan.edits);
+    refuseLocally(plan.refused);
+  };
+  const page = Math.max(1, Math.floor(Math.max(viewport - headerHeight, rowHeight) / rowHeight) - 1);
+  const onKeyDown = (event) => {
+    if (editing || isComposing(event) || !current || !currentCell) return;
+    const column = columns[current.col];
+    const mod = isMod(event);
+    if (mod && event.altKey && event.key.toLowerCase() === "h") {
+      if (onShowHistory && currentCell.rowId !== null) {
+        event.preventDefault();
+        onShowHistory({ rowId: currentCell.rowId, field: currentCell.field });
+      }
+      return;
+    }
+    if (mod && !event.altKey && event.key.toLowerCase() === "z") {
+      const handler = event.shiftKey ? onRedo : onUndo;
+      if (handler) {
+        event.preventDefault();
+        handler();
+      }
+      return;
+    }
+    if (mod && !event.altKey && event.key.toLowerCase() === "y") {
+      if (onRedo) {
+        event.preventDefault();
+        onRedo();
+      }
+      return;
+    }
+    if (mod && !event.altKey && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      if (rows.length === 0) return;
+      setAnchor(cellAt({ row: 0, col: 0 }));
+      setActive(cellAt({ row: rows.length - 1, col: columns.length - 1 }));
+      focusCell();
+      return;
+    }
+    const moved = moveFrom(current, event, { rows: rows.length, cols: columns.length, page });
+    if (moved) {
+      event.preventDefault();
+      const extend = event.shiftKey && moved.row !== HEADER && current.row !== HEADER;
+      moveTo(cellAt(moved), extend);
+      return;
+    }
+    if (event.key === "Tab") {
+      const step = event.shiftKey ? -1 : 1;
+      const col = current.col + step;
+      if (col < 0 || col >= columns.length) return;
+      event.preventDefault();
+      moveTo(cellAt({ row: current.row, col }));
+      return;
+    }
+    if (current.row === HEADER) {
+      if ((event.key === "Enter" || event.key === " ") && column && onSortChange) {
+        event.preventDefault();
+        onSortChange(nextSort(sort, column.field));
+      }
+      return;
+    }
+    switch (event.key) {
+      case "Enter":
+      case "F2":
+        event.preventDefault();
+        if (event.key === "Enter" && mod && column?.type === "url") {
+          const row = rows[current.row];
+          const url = row ? normalizeValue(column, row.values[column.field]) : null;
+          if (typeof url === "string" && url) {
+            if (onOpenLink) onOpenLink(url);
+            else window.open(url, "_blank", "noopener,noreferrer");
+          }
+          return;
+        }
+        if (column?.type === "checkbox") toggle(currentCell);
+        else beginEdit(currentCell);
+        return;
+      case " ":
+        event.preventDefault();
+        if (column?.type === "checkbox") toggle(currentCell);
+        else if (column && takesTyping(column.type)) beginEdit(currentCell, " ");
+        return;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        clearRange();
+        return;
+      case "Escape":
+        if (anchor && range && (range.top !== range.bottom || range.left !== range.right)) {
+          event.preventDefault();
+          setAnchor(currentCell);
+        }
+        return;
+    }
+    if (isTypingKey(event) && column) {
+      if (column.type === "rating" && /^\d$/.test(event.key)) {
+        event.preventDefault();
+        if (!cellEditable(column)) {
+          say(editable ? labels.readOnly(column.label) : labels.forbidden);
+          return;
+        }
+        const stars = Number(event.key);
+        const row = rows[current.row];
+        if (!row) return;
+        if (stars > ratingMax(column)) {
+          refuseLocally([{ rowId: row.id, field: column.field, error: labels.notARating(column.label, ratingMax(column)) }]);
+          return;
+        }
+        emit([{ rowId: row.id, field: column.field, value: stars === 0 ? null : stars }]);
+        return;
+      }
+      if (takesTyping(column.type)) {
+        event.preventDefault();
+        beginEdit(currentCell, column.type === "date" ? void 0 : event.key);
+      }
+    }
+  };
+  useEffect(() => {
+    const stop = () => {
+      dragging.current = false;
+    };
+    window.addEventListener("mouseup", stop);
+    return () => window.removeEventListener("mouseup", stop);
+  }, []);
+  const onCellMouseDown = (event, cell) => {
+    if (event.button !== 0) return;
+    const extend = event.shiftKey && cell.rowId !== null && currentCell?.rowId !== null;
+    if (!(editing && editing.rowId === cell.rowId && editing.field === cell.field)) moveTo(cell, extend);
+    dragging.current = cell.rowId !== null;
+  };
+  const onCellMouseEnter = (cell) => {
+    if (!dragging.current || cell.rowId === null) return;
+    setActive(cell);
+  };
+  const [first, last] = visibleRows(Math.max(scrollTop - headerHeight, 0), viewport, rowHeight, rows.length);
+  const drawn = [];
+  for (let index = first; index <= last; index += 1) drawn.push(index);
+  if (current && current.row >= 0 && (current.row < first || current.row > last)) drawn.push(current.row);
+  if (editing) {
+    const at = rowIndex.get(editing.rowId);
+    if (at !== void 0 && !drawn.includes(at)) drawn.push(at);
+  }
+  const describedId = `${id}-described`;
+  const helpId = `${id}-help`;
+  const activeColumn = current ? columns[current.col] : void 0;
+  const activeRecord = current && current.row >= 0 ? rows[current.row] : void 0;
+  const others = activeRecord && activeColumn ? onCells.get(cellKey(activeRecord.id, activeColumn.field)) ?? [] : [];
+  const description = activeRecord && activeColumn ? cellDescription(activeColumn, withLocal(activeRecord, local, activeColumn.field), others, context, said) : "";
+  const style = {
+    "--crewlet-sheet-columns": template,
+    "--crewlet-sheet-row-height": `${rowHeight}px`,
+    width: `${totalWidth}px`
+  };
+  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: [
+    /* @__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,
+        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        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: "crewlet-sheet-grid__grid",
+            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: "crewlet-sheet-grid__corner", 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", column.frozen && "crewlet-sheet-grid__cell--frozen", 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) : void 0,
+                        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);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "row",
+                    "aria-rowindex": index + 2,
+                    className: "crewlet-sheet-grid__row",
+                    style: { top: `${index * rowHeight}px` },
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          role: "rowheader",
+                          "aria-colindex": 1,
+                          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) })
+                          ]
+                        }
+                      ),
+                      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;
+                        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",
+                                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",
+                                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,
+                                isActive && onShowHistory && !isEditing ? /* @__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
+                );
+              }) })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: describedId, children: description }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { id: helpId, children: 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
+    ] }) : null
+  ] });
+}
+function cellDomId(grid, position) {
+  return `${grid}-r${position.row < 0 ? "h" : position.row}-c${position.col}`;
+}
+function withLocal(row, local, field) {
+  const refusal = local.get(cellKey(row.id, field));
+  if (refusal === void 0 || row.refused?.[field] !== void 0) return row;
+  return { ...row, refused: { ...row.refused, [field]: refusal } };
+}
+
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell };