@crewlethq/ui 0.31.1 → 0.33.0

package/dist/{chunk-QH3AKP2N.js → chunk-AC22RZKC.js}

@@ -1,7 +1,7 @@
-import { useLayerContainer } from './chunk-HMPFGIWM.js';
+import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Toaster-EOOOTSJT.css';
+import './Toaster-C6BQ7L6I.css';
 import { createContext, useMemo, useState, useRef, useEffect, useContext, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { XGlyph, CircleAlertGlyph, TriangleAlertGlyph, CircleCheckGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-ZITJKF6Z.js → chunk-AYB6AYNH.js}

@@ -1,5 +1,5 @@
 import { Combobox } from './chunk-QS4ZGTEU.js';
-import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';
 import { useState, useId, useMemo } from 'react';

package/dist/{chunk-Y5NQ2LMS.js → chunk-BY4N65PM.js}

@@ -1,4 +1,4 @@
-import { Popover } from './chunk-BWRGFKJP.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-YFW4MTK4.js → chunk-C7DKX453.js}

@@ -1,4 +1,4 @@
-import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-SKOYC2CF.js';
+import { MARKDOWN_CALLOUT_TONES, parseMarkdownSpans, markdownInline, markdownCodeText } from './chunk-KK5OYNAF.js';
 import { Schema, Fragment } from 'prosemirror-model';
 
 function headingTag(level) {

package/dist/{chunk-RCQXUT5K.js → chunk-CCAXYHQS.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-HJEVSQN6.js';
+import { tabId } from './chunk-VL6CUNSX.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

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

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

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

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

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

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

package/dist/{chunk-GOSQXEZU.js → chunk-DFZMYB5X.js}

@@ -1,10 +1,10 @@
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { AvatarStack } from './chunk-UAN5NE7M.js';
 import { Card } from './chunk-ACA27MZH.js';
+import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactCard-EXVAEBV6.css';
+import './ArtifactCard-AS5Z4CVI.css';
 import { useId } from 'react';
 import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -22,13 +22,17 @@ function ArtifactKindGlyph({ kind, size = "md" }) {
   const Drawn = KIND_GLYPHS[kind];
   return /* @__PURE__ */ jsx(Drawn, { size });
 }
+function ArtifactPreviewGlyph({ kind }) {
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) });
+}
 var LABELS = {
-  kinds: { html: "Page", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
+  kinds: { html: "HTML", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
   pinned: "Pinned",
   version: (version) => `v${version}`,
   changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
   present: (count) => count === 1 ? "1 here now" : `${count} here now`,
-  updated: "Updated"
+  updated: "Updated",
+  by: (name) => `by ${name}`
 };
 function ArtifactCard({
   title,
@@ -52,6 +56,7 @@ function ArtifactCard({
   const titleId = useId();
   const factsId = useId();
   const present = presence && presence.length > 0 ? presence : null;
+  const changedBy = updatedBy && updatedBy !== owner?.name ? updatedBy : void 0;
   return /* @__PURE__ */ jsxs(
     Card,
     {
@@ -62,10 +67,10 @@ function ArtifactCard({
       "aria-labelledby": titleId,
       "aria-describedby": factsId,
       children: [
-        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
+        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx(ArtifactPreviewGlyph, { kind }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
         /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
           /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
-            /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", children: title }),
+            /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", title, children: title }),
             pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "xs" }) }) : null
           ] }),
           /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
@@ -81,8 +86,9 @@ function ArtifactCard({
                 /* @__PURE__ */ jsx("span", { children: owner.name })
               ] }) : null,
               /* @__PURE__ */ jsxs("span", { children: [
-                updatedBy ? `${updatedBy} ` : `${text.updated} `,
-                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now })
+                `${text.updated} `,
+                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now }),
+                changedBy ? ` ${text.by(changedBy)}` : null
               ] })
             ] }),
             present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
@@ -99,4 +105,4 @@ function ArtifactCard({
   );
 }
 
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph };
+export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph, ArtifactPreviewGlyph };

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

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

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

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

package/dist/{chunk-CT4EZF62.js → chunk-G4ZW7A2W.js}

@@ -1,18 +1,18 @@
 import { TagGroup } from './chunk-O2EGEONV.js';
-import { CursorFlag } from './chunk-3BYIWOTV.js';
-import { presenceHueClass } from './chunk-I6POAB4V.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 { CursorFlag } from './chunk-3BYIWOTV.js';
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { ChangeMark } from './chunk-ZNBLFCQS.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-J6ZSH3F5.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
-import { Avatar } from './chunk-5OM447RW.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
+import { Menu } from './chunk-3EB2AV3H.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SheetGrid-J3TKKXZL.css';
+import './SheetGrid-AKPUCK67.css';
 import { useId, useRef, useMemo, useState, useLayoutEffect, useEffect, useCallback } from 'react';
 import { CheckGlyph, StarGlyph, CircleAlertGlyph, ArrowUpGlyph, ArrowDownGlyph, TrashGlyph, EllipsisGlyph, RotateCcwClockGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';
 import { isCrewletCharacter } from '@crewlethq/icons/characters';
@@ -615,6 +615,7 @@ var DateCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "date
 var UrlCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "url" });
 var RatingCell = (props) => /* @__PURE__ */ jsx(SheetCell, { ...props, type: "rating" });
 var HEADER = -1;
+var FROZEN_SHARE = 0.6;
 function SheetGrid({
   label,
   columns: declared,
@@ -647,7 +648,59 @@ function SheetGrid({
   const labels = useMemo(() => sheetLabels(labelOverrides), [labelOverrides]);
   const said = useMemo(() => presenceLabels(presenceOverrides), [presenceOverrides]);
   const context = useMemo(() => ({ people, locale, labels }), [people, locale, labels]);
-  const columns = useMemo(() => drawnColumns(declared), [declared]);
+  const ordered = useMemo(() => drawnColumns(declared), [declared]);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const latestRows = useRef(given);
+  useLayoutEffect(() => {
+    latestRows.current = given;
+  });
+  const hasRows = given.length > 0;
+  const [samples, setSamples] = useState(null);
+  useLayoutEffect(() => {
+    const from = hasRows ? latestRows.current : [];
+    setSamples(new Map(ordered.filter((column) => !(column.width && column.width > 0)).map((column) => [column.field, fitSamples(column, from, context)])));
+  }, [ordered, hasRows, context]);
+  const [fontsLoaded, setFontsLoaded] = useState(0);
+  useEffect(() => {
+    const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+    if (!fonts) return void 0;
+    let live = true;
+    const loaded = () => {
+      if (live) setFontsLoaded((n) => n + 1);
+    };
+    void fonts.ready.then(loaded);
+    fonts.addEventListener("loadingdone", loaded);
+    return () => {
+      live = false;
+      fonts.removeEventListener("loadingdone", loaded);
+    };
+  }, []);
+  const measurer = useRef(null);
+  const [measured, setMeasured] = useState(/* @__PURE__ */ new Map());
+  useLayoutEffect(() => {
+    const box = measurer.current;
+    if (!box) return;
+    const next = /* @__PURE__ */ new Map();
+    for (const group of box.querySelectorAll("[data-measure]")) {
+      let widest = 0;
+      for (const part of group.children) widest = Math.max(widest, part.getBoundingClientRect().width);
+      next.set(group.dataset["measure"] ?? "", widest);
+    }
+    setMeasured(next);
+  }, [samples, fontsLoaded]);
+  const columns = useMemo(() => {
+    const declares = (column) => column.width !== void 0 && column.width > 0;
+    const fitted = ordered.map((column) => declares(column) ? column : { ...column, width: fittedWidth(column.type, measured.get(column.field) ?? 0) });
+    if (viewportWidth <= 0) return fitted;
+    const room = Math.floor(viewportWidth * FROZEN_SHARE) - SHEET_ROW_NUMBER_WIDTH;
+    const over = fitted.filter((column) => column.frozen).reduce((sum, column) => sum + columnWidth(column), 0) - room;
+    const yielding = ordered.filter((column) => column.frozen && !declares(column)).length;
+    if (over <= 0 || yielding === 0) return fitted;
+    const each = Math.ceil(over / yielding);
+    return fitted.map(
+      (column, index) => column.frozen && !declares(ordered[index]) ? { ...column, width: Math.max(SHEET_COLUMN_BOUNDS[column.type][0], columnWidth(column) - each) } : column
+    );
+  }, [ordered, measured, viewportWidth]);
   const rows = useMemo(() => sortRows(columns, given, sort, context), [columns, given, sort, context]);
   const editable = mode === "edit" && onEdit !== void 0;
   const rowActions = mode === "edit" && onDeleteRow !== void 0;
@@ -660,6 +713,7 @@ function SheetGrid({
   const [headerHeight, setHeaderHeight] = useState(SHEET_ROW_HEIGHT);
   const [viewport, setViewport] = useState(0);
   const [scrollTop, setScrollTop] = useState(0);
+  const [scrolledAcross, setScrolledAcross] = useState(false);
   const [active, setActive] = useState(null);
   const [anchor, setAnchor] = useState(null);
   const [editing, setEditing] = useState(null);
@@ -690,6 +744,7 @@ function SheetGrid({
       const head = grid.current?.querySelector(".crewlet-sheet-grid__row--head")?.offsetHeight ?? 0;
       if (head > 0) setHeaderHeight(head);
       setViewport(scroller.current?.clientHeight ?? 0);
+      setViewportWidth(scroller.current?.clientWidth ?? 0);
     };
     measure();
     if (typeof ResizeObserver !== "function") return void 0;
@@ -707,6 +762,7 @@ function SheetGrid({
     [columns]
   );
   const totalWidth = useMemo(() => columns.reduce((sum, column) => sum + columnWidth(column), SHEET_ROW_NUMBER_WIDTH), [columns]);
+  const lastFrozen = useMemo(() => columns.reduce((edge, column, index) => column.frozen ? index : edge, -1), [columns]);
   const frozenEdge = useMemo(() => {
     let edge = SHEET_ROW_NUMBER_WIDTH;
     columns.forEach((column, index) => {
@@ -1099,7 +1155,10 @@ function SheetGrid({
     width: `${totalWidth}px`
   };
   const contentHeight = headerHeight + rows.length * rowHeight + 2;
-  const scrollerStyle = fit === "content" ? { height: `${height !== void 0 ? Math.min(contentHeight, height) : contentHeight}px` } : height !== void 0 ? { height: `${height}px` } : void 0;
+  const scrollerStyle = fit === "content" ? {
+    height: `${height !== void 0 ? Math.min(contentHeight, height) : contentHeight}px`,
+    "--crewlet-sheet-content-height": `${contentHeight}px`
+  } : height !== void 0 ? { height: `${height}px` } : void 0;
   const side = (rowAt) => {
     const top = headerHeight + rowAt * rowHeight - scrollTop;
     const view = viewport > 0 ? viewport : rowHeight * 12;
@@ -1111,9 +1170,12 @@ function SheetGrid({
       "div",
       {
         ref: scroller,
-        className: "crewlet-sheet-grid__scroller",
+        className: cx("crewlet-sheet-grid__scroller", scrolledAcross && "crewlet-sheet-grid__scroller--across"),
         style: scrollerStyle,
-        onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        onScroll: (event) => {
+          setScrollTop(event.currentTarget.scrollTop);
+          setScrolledAcross(event.currentTarget.scrollLeft > 0);
+        },
         children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1126,7 +1188,7 @@ function SheetGrid({
             "aria-multiselectable": "true",
             "aria-describedby": helpId,
             tabIndex: -1,
-            className: "crewlet-sheet-grid__grid",
+            className: cx("crewlet-sheet-grid__grid", range && (range.top !== range.bottom || range.left !== range.right) && "crewlet-sheet-grid__grid--range"),
             style,
             onKeyDown,
             onMouseMove: rowActions ? (event) => {
@@ -1139,7 +1201,7 @@ function SheetGrid({
             onPaste,
             children: [
               /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-sheet-grid__head", children: /* @__PURE__ */ jsxs("div", { role: "row", "aria-rowindex": 1, className: "crewlet-sheet-grid__row crewlet-sheet-grid__row--head", children: [
-                /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-colindex": 1, className: "crewlet-sheet-grid__corner", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.rowHeader }) }),
+                /* @__PURE__ */ jsx("div", { role: "columnheader", "aria-colindex": 1, className: cx("crewlet-sheet-grid__corner", lastFrozen < 0 && "crewlet-sheet-grid__frozen-edge"), children: /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.rowHeader }) }),
                 columns.map((column, col) => {
                   const position = { row: HEADER, col };
                   const isActive = current?.row === HEADER && current.col === col;
@@ -1155,7 +1217,13 @@ function SheetGrid({
                         "aria-colindex": col + 2,
                         "aria-sort": sorted ?? (onSortChange ? "none" : void 0),
                         tabIndex: isActive ? 0 : -1,
-                        className: cx("crewlet-sheet-grid__header", column.frozen && "crewlet-sheet-grid__cell--frozen", isActive && "crewlet-sheet-grid__header--active"),
+                        className: cx(
+                          "crewlet-sheet-grid__header",
+                          `crewlet-sheet-grid__header--${column.type}`,
+                          column.frozen && "crewlet-sheet-grid__cell--frozen",
+                          col === lastFrozen && "crewlet-sheet-grid__frozen-edge",
+                          isActive && "crewlet-sheet-grid__header--active"
+                        ),
                         style: column.frozen ? { insetInlineStart: `${offsets[col]}px` } : void 0,
                         onMouseDown: (event) => onCellMouseDown(event, { rowId: null, field: column.field }),
                         onFocus: (event) => {
@@ -1164,7 +1232,7 @@ function SheetGrid({
                         onClick: () => {
                           if (onSortChange) onSortChange(nextSort(sort, column.field));
                         },
-                        title: onSortChange ? labels.sortBy(column.label) : void 0,
+                        title: onSortChange ? labels.sortBy(column.label) : column.label,
                         children: [
                           /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-label", children: column.label }),
                           /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${labels.types[column.type]}` }),
@@ -1194,29 +1262,43 @@ function SheetGrid({
                         {
                           role: "rowheader",
                           "aria-colindex": 1,
-                          className: cx("crewlet-sheet-grid__rownum", rowPresence && "crewlet-sheet-grid__rownum--present", rowPresence && presenceHueClass(rowPresence.hue)),
+                          className: cx(
+                            "crewlet-sheet-grid__rownum",
+                            lastFrozen < 0 && "crewlet-sheet-grid__frozen-edge",
+                            rowPresence && "crewlet-sheet-grid__rownum--present",
+                            rowPresence && presenceHueClass(rowPresence.hue)
+                          ),
                           children: [
                             /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: index + 1 }),
                             /* @__PURE__ */ jsx(VisuallyHidden, { children: rowName(columns, row, index, context) }),
-                            rowActions && (rowMenu === row.id || hoveredRow === row.id || current?.row === index) ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__row-actions", children: /* @__PURE__ */ jsx(
-                              Menu,
+                            rowActions && (rowMenu === row.id || hoveredRow === row.id || current?.row === index) ? /* @__PURE__ */ jsx(
+                              "span",
                               {
-                                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: [
+                                className: cx(
+                                  "crewlet-sheet-grid__row-actions",
+                                  rowMenu !== row.id && hoveredRow !== row.id && "crewlet-sheet-grid__row-actions--active-row"
+                                ),
+                                children: /* @__PURE__ */ jsx(
+                                  Menu,
                                   {
-                                    key: "delete",
-                                    label: labels.deleteRow,
-                                    icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
-                                    danger: true,
-                                    onSelect: () => onDeleteRow?.(row.id)
+                                    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
+                            ) : null
                           ]
                         }
                       ),
@@ -1232,6 +1314,7 @@ function SheetGrid({
                         const people2 = onCells.get(key);
                         const lead = people2?.[0];
                         const isEditing = editing?.rowId === row.id && editing.field === column.field;
+                        const history = isActive && onShowHistory !== void 0 && !isEditing;
                         return (
                           // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keys reach the grid's own handler, which toggles on Space and Enter
                           /* @__PURE__ */ jsxs(
@@ -1248,11 +1331,13 @@ function SheetGrid({
                                 "crewlet-sheet-grid__cell",
                                 `crewlet-sheet-grid__cell--${column.type}`,
                                 column.frozen && "crewlet-sheet-grid__cell--frozen",
+                                col === lastFrozen && "crewlet-sheet-grid__frozen-edge",
                                 selected && "crewlet-sheet-grid__cell--selected",
                                 isActive && "crewlet-sheet-grid__cell--active",
                                 pending && "crewlet-sheet-grid__cell--pending",
                                 refused !== void 0 && "crewlet-sheet-grid__cell--refused",
                                 isEditing && "crewlet-sheet-grid__cell--editing",
+                                history && "crewlet-sheet-grid__cell--history",
                                 lead && "crewlet-presence-ring",
                                 lead && presenceHueClass(lead.hue),
                                 lead && (lead.idle ? "crewlet-presence-ring--idle" : null)
@@ -1286,7 +1371,7 @@ function SheetGrid({
                                 ) : null,
                                 people2 && lead ? /* @__PURE__ */ jsx(CursorFlag, { name: flagText(people2), hue: lead.hue, kind: lead.kind, editing: people2.some((entry) => entry.editing) }) : null,
                                 isActive && refused !== void 0 && !isEditing ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__message", "aria-hidden": "true", children: refused }) : null,
-                                isActive && onShowHistory && !isEditing ? /* @__PURE__ */ jsx(
+                                history ? /* @__PURE__ */ jsx(
                                   "button",
                                   {
                                     type: "button",
@@ -1295,7 +1380,7 @@ function SheetGrid({
                                     className: "crewlet-sheet-grid__history",
                                     title: labels.history,
                                     onMouseDown: (event) => event.stopPropagation(),
-                                    onClick: () => onShowHistory({ rowId: row.id, field: column.field }),
+                                    onClick: () => onShowHistory?.({ rowId: row.id, field: column.field }),
                                     children: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" })
                                   }
                                 ) : null,
@@ -1329,6 +1414,13 @@ function SheetGrid({
         )
       }
     ),
+    samples ? /* @__PURE__ */ jsx("div", { ref: measurer, className: "crewlet-sheet-grid__measure", "aria-hidden": "true", inert: true, children: ordered.filter((column) => samples.has(column.field)).map((column) => /* @__PURE__ */ jsxs("div", { "data-measure": column.field, children: [
+      /* @__PURE__ */ jsxs("div", { className: cx("crewlet-sheet-grid__header", `crewlet-sheet-grid__header--${column.type}`), children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__header-label", children: column.label }),
+        onSortChange ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__sort", children: /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }) }) : null
+      ] }),
+      (samples.get(column.field) ?? []).map((value, index) => /* @__PURE__ */ jsx("div", { className: cx("crewlet-sheet-grid__cell", `crewlet-sheet-grid__cell--${column.type}`), children: /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__value", children: /* @__PURE__ */ jsx(CellDisplay, { column, value, context }) }) }, index))
+    ] }, column.field)) }) : null,
     /* @__PURE__ */ jsx(VisuallyHidden, { id: describedId, children: description }),
     /* @__PURE__ */ jsx(VisuallyHidden, { id: helpId, children: rowActions ? `${labels.keyboardHelp} ${labels.rowActionsHelp}` : labels.keyboardHelp }),
     /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", children: /* @__PURE__ */ jsx("span", { children: announcement.text }, announcement.n) }) }),

package/dist/chunk-GLSOD5Z4.js

@@ -0,0 +1,33 @@
+import { Toolbar } from './chunk-PGRPNDWM.js';
+import { ShortcutTip } from './chunk-22UEIXZE.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CanvasToolbar-EM5EVZED.css';
+import { jsx } from 'react/jsx-runtime';
+
+function toolForKey(tools, event) {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return void 0;
+  const pressed = event.key.toLowerCase();
+  return tools.find((tool) => tool.shortcut.toLowerCase() === pressed)?.id;
+}
+function CanvasToolbar({
+  label,
+  tools,
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Toolbar, { label, className: cx("crewlet-canvas-toolbar", className), children: tools.map((tool) => /* @__PURE__ */ jsx(ShortcutTip, { label: tool.label, keys: [tool.shortcut], children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "sm",
+      label: tool.label,
+      title: "",
+      icon: tool.icon,
+      pressed: tool.id === value,
+      onClick: () => onChange(tool.id)
+    }
+  ) }, tool.id)) });
+}
+
+export { CanvasToolbar, toolForKey };

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

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

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

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