@crewlethq/ui 0.32.0 → 0.33.0

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

@@ -3,16 +3,16 @@ import { Tag } from './chunk-GFV4LJHH.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-import { ChangeMark } from './chunk-YEKYVJQR.js';
-import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-NHBP2XS5.js';
+import { ChangeMark } from './chunk-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-E6EWK5YY.js → chunk-GLSOD5Z4.js}

@@ -1,8 +1,8 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { ShortcutTip } from './chunk-OTN35CI4.js';
+import { ShortcutTip } from './chunk-22UEIXZE.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasToolbar-AE5MXH7T.css';
+import './CanvasToolbar-EM5EVZED.css';
 import { jsx } from 'react/jsx-runtime';
 
 function toolForKey(tools, event) {
@@ -20,7 +20,7 @@ function CanvasToolbar({
   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: "md",
+      size: "sm",
       label: tool.label,
       title: "",
       icon: tool.icon,

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';