@crewlethq/ui 0.33.0 → 0.34.0

package/dist/{SheetGrid-AKPUCK67.css → SheetGrid-GDPCCZ4V.css}

@@ -194,25 +194,56 @@
   box-shadow: 0 0 0 2px var(--crewlet-presence-hue);
 }
 
+/* THE GUTTER: one centred stack, so the number and the row's actions button
+   take exactly the same place and swapping one for the other moves nothing.
+   Its width is the component's fixed track (SHEET_ROW_NUMBER_WIDTH), which
+   holds five tabular digits, so row 9 and row 10000 stand in one column. */
 .crewlet-sheet-grid__rownum {
+  display: grid;
+  grid-template-areas: 'gutter';
+  place-items: center;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
 
-/* The row actions sit at the number's trailing edge, over the cell's own
-   background, so the number stays readable beside them. */
+.crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__row-actions {
+  grid-area: gutter;
+}
+
+/* THE ACTIONS BUTTON IS ALWAYS THERE, drawn clear until it is wanted, so a
+   tap on the number opens the row's menu on a screen with no pointer to
+   hover with. It shows, and the number gives way to it, under the pointer,
+   on the row holding focus (the active cell, or the button itself) and while
+   its menu is open. A row the reader has not entered keeps its number. */
 .crewlet-sheet-grid__row-actions {
-  position: absolute;
-  top: 50%;
-  inset-inline-end: 0;
   display: inline-flex;
-  transform: translateY(-50%);
+  opacity: 0;
+}
+
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum > .crewlet-sheet-grid__row-actions,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__row-actions {
+  opacity: 1;
 }
 
-/* The active row's actions and the active cell's history are the reader's
-   tools while they are in the grid, not marks on a sheet nobody has entered. */
-.crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__row-actions--active-row,
+.crewlet-sheet-grid__row:is(:hover, :focus-within) > .crewlet-sheet-grid__rownum--actions > .crewlet-sheet-grid__rownum-number,
+.crewlet-sheet-grid__rownum--open > .crewlet-sheet-grid__rownum-number {
+  visibility: hidden;
+}
+
+/* THE SELECTED ROWS' NUMBERS are marked as their cells are, and on the same
+   condition (the reader is in the grid, or the selection spans more than one
+   cell), the way a spreadsheet lights the row headers of a selection. The
+   tint is laid over the gutter's own ground, which a sticky gutter needs: a
+   translucent tint alone lets the values scrolling under it show through. */
+.crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
+  color: var(--color-brand-accent-ink);
+}
+
+/* The active cell's history is the reader's tool while they are in the grid,
+   not a mark on a sheet nobody has entered. */
 .crewlet-sheet-grid__grid:not(:focus-within) .crewlet-sheet-grid__cell--history:not(:hover) > .crewlet-sheet-grid__history {
   visibility: hidden;
 }
@@ -255,9 +286,11 @@
 /* THE SELECTION IS TINTED WHILE THE READER IS IN THE GRID, or while it
    spans more than one cell. A grid nobody has entered still holds its first
    cell as the active one (the keys start there), and tinting it drew a stray
-   highlight on every sheet as it opened. */
+   highlight on every sheet as it opened. The tint is laid over the cell's
+   own ground: alone, a translucent tint on a frozen cell let the values
+   scrolling under it show through. */
 .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__cell--selected {
-  background: var(--color-brand-accent-soft);
+  background: linear-gradient(var(--color-brand-accent-soft), var(--color-brand-accent-soft)) var(--color-surface-background);
 }
 
 /* THE FROZEN EDGE once the grid is scrolled sideways: the columns that stay
@@ -758,6 +791,14 @@
     color: HighlightText;
   }
 
+  /* A selected row's number takes the selection's ink on the page's ground:
+     on a Highlight ground the browser's backplate behind the digits drew
+     them as a solid block. */
+  .crewlet-sheet-grid__grid:is(:focus-within, .crewlet-sheet-grid__grid--range) .crewlet-sheet-grid__rownum--selected {
+    background: Canvas;
+    color: Highlight;
+  }
+
   .crewlet-sheet-grid__rownum--present::before {
     background: Highlight;
   }

package/dist/SheetModel/index.js

@@ -1,3 +1,3 @@
-export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-J6ZSH3F5.js';
+export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_BOUNDS, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, SHEET_FIT_SAMPLES, SHEET_LABELS, SHEET_ROW_HEIGHT, SHEET_ROW_NUMBER_WIDTH, SheetPendingEdits, TEXT_MAX_DEFAULT, URL_MAX, cellDescription, cellKey, cellSpeech, changeText, changeTime, checkValue, columnOffsets, columnWidth, compareValues, displayText, drawnColumns, editText, editorSide, findOption, findPerson, fitSamples, fittedWidth, flagText, hasPrevious, inRange, isEmptyValue, isMod, isMultiCell, isSheetColumnType, isTypingKey, liveOptions, moveFrom, nextSort, normalizeValue, optionHue, parseOptionList, parseTSV, parseText, planClear, planPaste, presenceByCell, presenceByColumn, presenceByRow, rangeOf, ratingMax, refusalText, rowName, sameValue, scrollToRow, sheetLabels, sortRows, spokenText, statusTone, textMax, toTSV, visibleRows } from '../chunk-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/SheetModel/labels.d.ts

@@ -59,7 +59,7 @@ export interface SheetLabels {
     dismiss: string;
     /** A refusal, as the grid announces it: "Not saved: <reason>". */
     notSaved: (reason: string) => string;
-    /** The row actions control on a row's number, and its delete item. */
+    /** The row actions button in a row's number gutter (its name and tooltip), and its delete item. */
     rowActions: (row: number) => string;
     deleteRow: string;
     /** Appended to the keyboard help when a row has actions. */

package/dist/Switcher/index.js

@@ -1,10 +1,10 @@
-export { Switcher } from '../chunk-O37AQNLK.js';
-import '../chunk-TEUQWOWZ.js';
+export { Switcher } from '../chunk-GMU6SQ6B.js';
 import '../chunk-XEGZHHRH.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-K3IJQNB7.js';
 import '../chunk-FYTIJM2T.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-TEUQWOWZ.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';

package/dist/TimeWindowPicker/index.js

@@ -1,5 +1,5 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-2DHMVB5J.js';
-import '../chunk-UQGFHNDI.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-AORVEG5V.js';
+import '../chunk-BQ7AKL2N.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-K3IJQNB7.js';
 import '../chunk-GXQ3B46I.js';

package/dist/Tooltip/Tooltip.d.ts

@@ -1,10 +1,21 @@
 import { type ReactElement, type ReactNode } from 'react';
 export type TooltipPlacement = 'top' | 'bottom';
+/**
+ * Where along the trigger the panel lines up: `center` on its middle, or
+ * `start` on its leading edge, running toward the inline end.
+ */
+export type TooltipAlign = 'center' | 'start';
 export interface TooltipProps {
     /** One short line. A tooltip is not a place to put a list or a paragraph. */
     content: ReactNode;
     /** The preferred side. It flips when there is not room and there is more room the other way. */
     placement?: TooltipPlacement | undefined;
+    /**
+     * `start` for a trigger at the leading edge of what it belongs to, such as a
+     * grid's row gutter: a centred tip there hangs past that edge, and at the
+     * page's edge is pushed off its trigger by the clamp.
+     */
+    align?: TooltipAlign | undefined;
     /** Nothing opens: for a trigger whose tip is only worth showing sometimes. */
     disabled?: boolean | undefined;
     /** Milliseconds a pointer rests on the trigger before the panel appears. Focus never waits. */
@@ -48,4 +59,4 @@ export interface TooltipProps {
  * control has a name already, and replacing it with the hint is how a Close
  * button came to be announced as "Closing is unavailable until this finishes".
  */
-export declare function Tooltip({ content, placement, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react").JSX.Element;
+export declare function Tooltip({ content, placement, align, disabled, openDelay, closeDelay, className, children, }: TooltipProps): import("react").JSX.Element;

package/dist/Tooltip/index.d.ts

@@ -1,3 +1,3 @@
 import './Tooltip.css';
 export { Tooltip } from './Tooltip.js';
-export type { TooltipPlacement, TooltipProps } from './Tooltip.js';
+export type { TooltipAlign, TooltipPlacement, TooltipProps } from './Tooltip.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-5FYPE5GL.js';
+export { Tooltip } from '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,9 +1,9 @@
-export { TreeCanvas } from '../chunk-4IJS5CPF.js';
+export { TreeCanvas } from '../chunk-UHJQDFKQ.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-22UEIXZE.js';
+import '../chunk-3P4Y5RX6.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-5FYPE5GL.js';
+import '../chunk-6ZJ3N7QI.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{chunk-22UEIXZE.js → chunk-3P4Y5RX6.js}

@@ -1,6 +1,6 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Tooltip } from './chunk-5FYPE5GL.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-GLSOD5Z4.js → chunk-3Y56GQPM.js}

@@ -1,5 +1,5 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { ShortcutTip } from './chunk-22UEIXZE.js';
+import { ShortcutTip } from './chunk-3P4Y5RX6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';

package/dist/{chunk-5FYPE5GL.js → chunk-6ZJ3N7QI.js}

@@ -28,6 +28,7 @@ var CLOSE_DELAY = ms(motion.duration.base);
 function Tooltip({
   content,
   placement = "top",
+  align = "center",
   disabled = false,
   openDelay = OPEN_DELAY,
   closeDelay = CLOSE_DELAY,
@@ -94,8 +95,10 @@ function Tooltip({
     const host = inHost ? container.getBoundingClientRect() : viewportBounds();
     const rect = at.getBoundingClientRect();
     const own = box.getBoundingClientRect();
+    const rtl = getComputedStyle(at).direction === "rtl";
+    const startX = align === "center" ? rect.x + rect.width / 2 - own.width / 2 : rtl ? rect.right - own.width : rect.x;
     const local = {
-      x: rect.x + rect.width / 2 - own.width / 2 - (inHost ? host.x : 0),
+      x: startX - (inHost ? host.x : 0),
       y: rect.y - (inHost ? host.y : 0),
       width: rect.width,
       height: rect.height
@@ -114,7 +117,7 @@ function Tooltip({
     setPlace(
       (was) => was && was.left === spot.left && was.top === spot.top && was.side === spot.side ? was : spot
     );
-  }, [container, placement]);
+  }, [align, container, placement]);
   useLayoutEffect(() => {
     if (!open) return;
     position();

package/dist/{chunk-2DHMVB5J.js → chunk-AORVEG5V.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-UQGFHNDI.js';
+import { Select } from './chunk-BQ7AKL2N.js';
 import { Popover } from './chunk-K3IJQNB7.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Input } from './chunk-6QFAK2WV.js';

package/dist/{chunk-UQGFHNDI.js → chunk-BQ7AKL2N.js}

@@ -1,7 +1,7 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { useLayerContainer, viewportBounds, anchorGone, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Select-2P7AWUE4.css';
+import './Select-A54YS5EP.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
@@ -24,6 +24,7 @@ var Select = forwardRef(function Select2({
   align = "left",
   active = false,
   error = false,
+  appearance = "field",
   ariaLabel,
   searchable = false,
   searchPlaceholder = "Search",
@@ -37,7 +38,7 @@ var Select = forwardRef(function Select2({
 }, ref) {
   const generatedId = useId();
   const rootId = id ?? generatedId;
-  const classes = cx(className, width === "auto" && "crewlet-select--auto");
+  const classes = cx(className, width === "auto" && "crewlet-select--auto", appearance === "quiet" && "crewlet-select--quiet");
   const chosen = useMemo(() => {
     if (multiple) return Array.isArray(value) ? value : [];
     if (value === void 0 || value === null) return [];

package/dist/{chunk-ORT5IKHP.js → chunk-CCLNGVCM.js}

@@ -1,4 +1,4 @@
-import { Select } from './chunk-UQGFHNDI.js';
+import { Select } from './chunk-BQ7AKL2N.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
 import { Modal } from './chunk-XEGZHHRH.js';
 import { Callout } from './chunk-SZZRIHGT.js';

package/dist/{chunk-UNXLTJU7.js → chunk-CFAJP777.js}

@@ -1,5 +1,5 @@
 import { Document } from './chunk-TYKQ33CL.js';
-import { ArtifactKindGlyph } from './chunk-DFZMYB5X.js';
+import { ArtifactKindGlyph } from './chunk-XTOVADJU.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';
 import './DashboardCover-KYGYMRKW.css';

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

@@ -3,16 +3,18 @@ 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-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 { ChangeMark } from './chunk-SGHIAGPR.js';
+import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-VI5FWDZW.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.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 { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SheetGrid-AKPUCK67.css';
+import './SheetGrid-GDPCCZ4V.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';
@@ -720,7 +722,6 @@ function SheetGrid({
   const [local, setLocal] = useState(/* @__PURE__ */ new Map());
   const [announcement, setAnnouncement] = useState({ text: "", n: 0 });
   const dragging = useRef(false);
-  const [hoveredRow, setHoveredRow] = useState(null);
   const [rowMenu, setRowMenu] = useState(null);
   const say = useCallback((text) => setAnnouncement((current2) => ({ text, n: current2.n + 1 })), []);
   const heardRefusals = useRef(/* @__PURE__ */ new Map());
@@ -1003,6 +1004,7 @@ function SheetGrid({
   const page = Math.max(1, Math.floor(Math.max(viewport - headerHeight, rowHeight) / rowHeight) - 1);
   const onKeyDown = (event) => {
     if (editing || isComposing(event) || !current || !currentCell) return;
+    if (event.target.closest(".crewlet-sheet-grid__row-actions")) return;
     const column = columns[current.col];
     const mod = isMod(event);
     if (mod && event.altKey && event.key.toLowerCase() === "h") {
@@ -1191,11 +1193,6 @@ function SheetGrid({
             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) => {
-              const over = event.target.closest("[data-row-id]")?.dataset["rowId"] ?? null;
-              setHoveredRow((was) => was === over ? was : over);
-            } : void 0,
-            onMouseLeave: rowActions ? () => setHoveredRow(null) : void 0,
             onCopy,
             onCut,
             onPaste,
@@ -1248,6 +1245,9 @@ function SheetGrid({
               /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "crewlet-sheet-grid__body", style: { height: `${rows.length * rowHeight}px` }, children: drawn.map((index) => {
                 const row = rows[index];
                 const rowPresence = onRows.get(row.id);
+                const rowNameId = `${id}-r${index}-name`;
+                const rowSelected = range !== null && index >= range.top && index <= range.bottom;
+                const actionsLabel = labels.rowActions(index + 1);
                 return /* @__PURE__ */ jsxs(
                   "div",
                   {
@@ -1262,43 +1262,42 @@ function SheetGrid({
                         {
                           role: "rowheader",
                           "aria-colindex": 1,
+                          "aria-labelledby": rowNameId,
                           className: cx(
                             "crewlet-sheet-grid__rownum",
                             lastFrozen < 0 && "crewlet-sheet-grid__frozen-edge",
+                            rowActions && "crewlet-sheet-grid__rownum--actions",
+                            rowSelected && "crewlet-sheet-grid__rownum--selected",
+                            rowMenu === row.id && "crewlet-sheet-grid__rownum--open",
                             rowPresence && "crewlet-sheet-grid__rownum--present",
                             rowPresence && presenceHueClass(rowPresence.hue)
                           ),
                           children: [
-                            /* @__PURE__ */ jsx("span", { "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",
+                            /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__rownum-number", "aria-hidden": "true", children: index + 1 }),
+                            /* @__PURE__ */ jsx(VisuallyHidden, { id: rowNameId, children: rowName(columns, row, index, context) }),
+                            rowActions ? /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-grid__row-actions", children: /* @__PURE__ */ jsx(
+                              Menu,
                               {
-                                className: cx(
-                                  "crewlet-sheet-grid__row-actions",
-                                  rowMenu !== row.id && hoveredRow !== row.id && "crewlet-sheet-grid__row-actions--active-row"
+                                label: actionsLabel,
+                                triggerTabIndex: -1,
+                                open: rowMenu === row.id,
+                                onOpenChange: (open) => setRowMenu(open ? row.id : null),
+                                renderTrigger: (trigger) => (
+                                  // Lined up with the button's leading edge: the gutter is the
+                                  // grid's first column, and a centred tip hung past the grid.
+                                  /* @__PURE__ */ jsx(Tooltip, { content: actionsLabel, align: "start", children: /* @__PURE__ */ jsx(IconButton, { ...trigger, label: actionsLabel, icon: /* @__PURE__ */ jsx(EllipsisGlyph, {}), size: "sm", title: "" }) })
                                 ),
-                                children: /* @__PURE__ */ jsx(
-                                  Menu,
+                                items: [
                                   {
-                                    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)
-                                      }
-                                    ]
+                                    key: "delete",
+                                    label: labels.deleteRow,
+                                    icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                                    danger: true,
+                                    onSelect: () => onDeleteRow?.(row.id)
                                   }
-                                )
+                                ]
                               }
-                            ) : null
+                            ) }) : null
                           ]
                         }
                       ),

package/dist/{chunk-7WHDPLVJ.js → chunk-HOIZ6MIS.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from './chunk-5FYPE5GL.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FactList-G2H73NFR.css';

package/dist/{chunk-Z6GFMI2Z.js → chunk-IUD5VA2Z.js}

@@ -1,7 +1,7 @@
 import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
-import { Tooltip } from './chunk-5FYPE5GL.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { SegmentedControl } from './chunk-CCAXYHQS.js';
-import { ArtifactIcon } from './chunk-HH2GKAAE.js';
+import { ArtifactIcon } from './chunk-PLDUNXAO.js';
 import { Menu } from './chunk-3EB2AV3H.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/chunk-KF6YGL4B.js

@@ -0,0 +1,160 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './LivePreview-SRO7KHO4.css';
+import { createContext, useMemo, useContext, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/LivePreview/budget.ts
+var LIVE_PREVIEW_MAX = 12;
+var immediately = (run) => {
+  run();
+  return () => {
+  };
+};
+var perFrame = (run) => {
+  if (typeof requestAnimationFrame === "undefined") return immediately(run);
+  let timer;
+  const frame = requestAnimationFrame(() => {
+    timer = setTimeout(run, 0);
+  });
+  return () => {
+    cancelAnimationFrame(frame);
+    if (timer !== void 0) clearTimeout(timer);
+  };
+};
+function createLivePreviewBudget(max = LIVE_PREVIEW_MAX, schedule = immediately) {
+  const held = /* @__PURE__ */ new Set();
+  const queue = [];
+  let pending = null;
+  const next = () => {
+    if (pending || held.size >= max || queue.length === 0) return;
+    let ran = false;
+    const cancel = schedule(() => {
+      ran = true;
+      pending = null;
+      const ask = queue.shift();
+      if (ask && held.size < max) {
+        held.add(ask.ticket);
+        ask.grant();
+      } else if (ask) {
+        queue.unshift(ask);
+      }
+      next();
+    });
+    if (!ran) pending = cancel;
+  };
+  return {
+    max,
+    request(grant) {
+      const ticket = {};
+      queue.push({ ticket, grant });
+      next();
+      let done = false;
+      return () => {
+        if (done) return;
+        done = true;
+        if (held.delete(ticket)) {
+          next();
+          return;
+        }
+        const at = queue.findIndex((a) => a.ticket === ticket);
+        if (at >= 0) queue.splice(at, 1);
+        if (queue.length === 0 && pending) {
+          pending();
+          pending = null;
+        }
+      };
+    },
+    live: () => held.size,
+    waiting: () => queue.length
+  };
+}
+var LIVE_PREVIEW_DWELL_MS = 120;
+var DefaultBudget = createLivePreviewBudget(LIVE_PREVIEW_MAX, perFrame);
+var BudgetContext = createContext(DefaultBudget);
+function LivePreviewBudgetProvider({ max = LIVE_PREVIEW_MAX, children }) {
+  const budget = useMemo(() => createLivePreviewBudget(max, perFrame), [max]);
+  return /* @__PURE__ */ jsx(BudgetContext.Provider, { value: budget, children });
+}
+var NOOP = { ready: () => {
+}, fail: () => {
+} };
+var SignalContext = createContext(NOOP);
+function useLivePreview() {
+  return useContext(SignalContext);
+}
+function LivePreview({ children, fallback, width, rootMargin = "200px 0px", disabled = false, dwellMs = LIVE_PREVIEW_DWELL_MS, onStateChange, className }) {
+  const budget = useContext(BudgetContext);
+  const box = useRef(null);
+  const [near, setNear] = useState(false);
+  const [state, setState] = useState("idle");
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    const el = box.current;
+    if (!el || disabled || typeof IntersectionObserver === "undefined") return void 0;
+    const seen = new IntersectionObserver((entries) => setNear(entries.some((e) => e.isIntersecting)), { rootMargin });
+    seen.observe(el);
+    return () => seen.disconnect();
+  }, [disabled, rootMargin]);
+  useEffect(() => {
+    if (!near || disabled || failed) {
+      setState(failed ? "failed" : "idle");
+      return void 0;
+    }
+    setState("waiting");
+    let granted = false;
+    let giveBack = () => {
+    };
+    const dwell = setTimeout(() => {
+      giveBack = budget.request(() => {
+        granted = true;
+        setState("live");
+      });
+    }, dwellMs);
+    return () => {
+      clearTimeout(dwell);
+      giveBack();
+      if (granted) setState("idle");
+    };
+  }, [near, disabled, failed, budget, dwellMs]);
+  useEffect(() => onStateChange?.(state), [state, onStateChange]);
+  const mounted = state === "live" || state === "ready";
+  const signals = useMemo(
+    () => ({
+      ready: () => setState((s) => s === "live" ? "ready" : s),
+      fail: () => setFailed(true)
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsxs("span", { ref: box, className: cx("crewlet-live-preview", className), "data-state": state, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-live-preview__fallback", children: fallback }),
+    mounted ? /* @__PURE__ */ jsx("span", { className: "crewlet-live-preview__live", inert: true, children: /* @__PURE__ */ jsx(SignalContext.Provider, { value: signals, children: width === void 0 ? children : /* @__PURE__ */ jsx(PreviewScale, { width, children }) }) }) : null
+  ] });
+}
+function PreviewScale({ children, width, height, fit = "width" }) {
+  const box = useRef(null);
+  const [size, setSize] = useState(null);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el) return void 0;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      if (rect.width > 0) setSize((was) => was && was.w === rect.width && was.h === rect.height ? was : { w: rect.width, h: rect.height });
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const watch = new ResizeObserver(measure);
+    watch.observe(el);
+    return () => watch.disconnect();
+  }, []);
+  let layer = { width, visibility: "hidden" };
+  if (size) {
+    const k = fit === "contain" && height ? Math.min(size.w / width, size.h / height) : size.w / width;
+    const h = height ?? size.h / k;
+    const left = fit === "contain" ? (size.w - width * k) / 2 : 0;
+    const top = fit === "contain" ? (size.h - h * k) / 2 : 0;
+    layer = { width, height: h, transform: `translate(${left}px, ${top}px) scale(${k})` };
+  }
+  return /* @__PURE__ */ jsx("span", { ref: box, className: "crewlet-preview-scale", children: /* @__PURE__ */ jsx("span", { className: "crewlet-preview-scale__layer", style: layer, children }) });
+}
+
+export { LIVE_PREVIEW_DWELL_MS, LIVE_PREVIEW_MAX, LivePreview, LivePreviewBudgetProvider, PreviewScale, createLivePreviewBudget, immediately, perFrame, useLivePreview };

package/dist/{chunk-HH2GKAAE.js → chunk-PLDUNXAO.js}

@@ -1,4 +1,4 @@
-import { ArtifactKindGlyph } from './chunk-DFZMYB5X.js';
+import { ArtifactKindGlyph } from './chunk-XTOVADJU.js';
 import { ShieldGlyph, ActivityGlyph, GaugeGlyph, PackageGlyph, FolderGlyph, ClockGlyph, DatabaseGlyph, Settings2Glyph, BookOpenGlyph, FlagGlyph, StarGlyph, WandSparklesGlyph, BugGlyph, TargetGlyph, ImageGlyph, CodeGlyph, CoinsGlyph, UserGlyph, UsersGlyph, ChartNoAxesGanttGlyph, SquareKanbanGlyph, ListChecksGlyph, ListGlyph, GlobeGlyph, CompassGlyph, FileTextGlyph, TableGlyph, CalendarGlyph, LayoutDashboardGlyph, ChartPieGlyph, ChartColumnGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZNBLFCQS.js → chunk-SGHIAGPR.js}

@@ -1,5 +1,5 @@
-import { changeText, sheetLabels } from './chunk-J6ZSH3F5.js';
-import { Tooltip } from './chunk-5FYPE5GL.js';
+import { changeText, sheetLabels } from './chunk-VI5FWDZW.js';
+import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChangeMark-3VMTW7MT.css';
 import { jsx } from 'react/jsx-runtime';