@crewlethq/ui 0.32.0 → 0.34.0

package/dist/chunk-THROPJZC.js

@@ -0,0 +1,115 @@
+import { SlideNav } from './chunk-6VOS2GMB.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-LV4APO72.js';
+import { Eyebrow } from './chunk-RK4XPHVG.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenterView-T3EXIQ5S.css';
+import { useRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  current: (position, total, title) => `Slide ${position} of ${total}, ${title}`,
+  next: (title) => `Next, ${title}`,
+  onScreen: "Current",
+  upNext: "Next",
+  end: "End of the deck",
+  notes: "Speaker notes",
+  noNotes: "No notes for this slide.",
+  timer: "Time presenting",
+  pause: "Pause",
+  resume: "Resume",
+  reset: "Reset",
+  previous: "Previous slide",
+  forward: "Next slide",
+  position: (position, total) => `${position} of ${total}`
+};
+function formatStopwatch(ms) {
+  const total = Math.max(0, Math.floor(ms / 1e3));
+  const h = Math.floor(total / 3600);
+  const m = Math.floor(total % 3600 / 60);
+  const s = total % 60;
+  const ss = String(s).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function PresenterView({
+  current,
+  currentTitle,
+  next,
+  nextTitle = "",
+  notes,
+  position,
+  total,
+  onNext,
+  onPrevious,
+  now = Date.now,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const clock = useRef(now);
+  clock.current = now;
+  const [banked, setBanked] = useState(0);
+  const [runningSince, setRunningSince] = useState(() => now());
+  const [tick, setTick] = useState(0);
+  useEffect(() => {
+    if (runningSince === null) return void 0;
+    const id = setInterval(() => setTick((t) => t + 1), 1e3);
+    return () => clearInterval(id);
+  }, [runningSince]);
+  const elapsed = banked + (runningSince === null ? 0 : clock.current() - runningSince);
+  const pause = () => {
+    if (runningSince === null) {
+      setRunningSince(clock.current());
+    } else {
+      setBanked(elapsed);
+      setRunningSince(null);
+    }
+  };
+  const reset = () => {
+    setBanked(0);
+    setRunningSince(runningSince === null ? null : clock.current());
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-presenter", className),
+      style: { "--crewlet-presenter-ratio": SLIDE_WIDTH / SLIDE_HEIGHT },
+      children: [
+        /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__main", "aria-label": text.onScreen, children: [
+          /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.onScreen }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__screen", children: [
+            /* @__PURE__ */ jsx(SlideStage, { label: text.current(position, total, currentTitle), framed: true, children: current }),
+            /* @__PURE__ */ jsx(
+              SlideNav,
+              {
+                className: "crewlet-presenter__controls",
+                position,
+                total,
+                onPrevious,
+                onNext,
+                labels: { previous: text.previous, next: text.forward, end: text.end, position: text.position }
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("aside", { className: "crewlet-presenter__side", children: [
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__next", "aria-label": text.upNext, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.upNext }),
+            next ? /* @__PURE__ */ jsx(SlideStage, { label: text.next(nextTitle), framed: true, children: next }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__end", children: text.end })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__timer", children: [
+            /* @__PURE__ */ jsx("span", { role: "timer", "aria-label": text.timer, className: "crewlet-presenter__elapsed", children: formatStopwatch(elapsed) }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: pause, children: runningSince === null ? text.resume : text.pause }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: reset, children: text.reset })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { className: "crewlet-presenter__notes", "aria-label": text.notes, children: [
+            /* @__PURE__ */ jsx(Eyebrow, { as: "p", className: "crewlet-presenter__caption", children: text.notes }),
+            /* @__PURE__ */ jsx("div", { className: "crewlet-presenter__notes-body", children: notes ? /* @__PURE__ */ jsx("p", { children: notes }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__empty", children: text.noNotes }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { PresenterView, formatStopwatch };

package/dist/{chunk-IDBHX5SR.js → chunk-TRQCHF2F.js}

@@ -1,4 +1,4 @@
-import { readMarkdown, writeMarkdown } from './chunk-YFW4MTK4.js';
+import { readMarkdown, writeMarkdown } from './chunk-C7DKX453.js';
 
 // src/RichEditor/roundtrip.ts
 function roundTripMarkdown(markdown) {

package/dist/{chunk-M3LUNN7F.js → chunk-TYKQ33CL.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Document-G3YTZIUL.css';
+import './Document-JUGCSQ4L.css';
 import { jsx } from 'react/jsx-runtime';
 
 function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
@@ -20,5 +20,16 @@ function Document({ as: Tag = "div", size = "md", measure = "normal", className,
 function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
   return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
 }
+function DocumentTitleField({ error = false, className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ...rest,
+      type: "text",
+      "aria-invalid": error || void 0,
+      className: cx("crewlet-document-title", "crewlet-document-title-field", className)
+    }
+  );
+}
 
-export { Document, DocumentTitle };
+export { Document, DocumentTitle, DocumentTitleField };

package/dist/chunk-UDQW6UK7.js

@@ -0,0 +1,129 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactKindIllustration-4NG6IE3C.css';
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ArtifactKindIllustration({ kind, className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 160 120",
+      "aria-hidden": "true",
+      focusable: "false",
+      className: cx("crewlet-kind-illustration", `crewlet-kind--${kind}`, className),
+      children: DRAWINGS[kind]
+    }
+  );
+}
+var DRAWINGS = {
+  doc: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "52", y: "12", width: "56", height: "96", rx: "7" }),
+    /* @__PURE__ */ jsx("rect", { className: "m", x: "62", y: "24", width: "24", height: "6", rx: "3" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "38", width: "36", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "46", width: "30", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "54", width: "34", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { className: "m", cx: "65", cy: "70", r: "3.5" }),
+    /* @__PURE__ */ jsx("path", { className: "c", d: "M63.2 70.1l1.3 1.3 2.4-2.6" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "72", y: "68", width: "24", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { className: "s", cx: "65", cy: "80", r: "3.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "72", y: "78", width: "20", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "62", y: "92", width: "28", height: "4", rx: "2" })
+  ] }),
+  slides: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "22", y: "24", width: "116", height: "72", rx: "8" }),
+    /* @__PURE__ */ jsx("rect", { className: "m", x: "34", y: "38", width: "50", height: "9", rx: "4.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "34", y: "55", width: "42", height: "5", rx: "2.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "34", y: "65", width: "34", height: "5", rx: "2.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "92", y: "50", width: "34", height: "32", rx: "6" })
+  ] }),
+  design: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "58", y: "8", width: "44", height: "104", rx: "10" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "72", y: "15", width: "16", height: "3.5", rx: "1.75" }),
+    /* @__PURE__ */ jsx("circle", { className: "s", cx: "69", cy: "33", r: "4.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "77", y: "31", width: "17", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("circle", { className: "s", cx: "69", cy: "46", r: "4.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "77", y: "44", width: "13", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "65", y: "57", width: "30", height: "22", rx: "4" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "62", y: "94", width: "36", height: "14", rx: "6" }),
+    /* @__PURE__ */ jsx("circle", { className: "m", cx: "71", cy: "101", r: "2.2" }),
+    /* @__PURE__ */ jsx("circle", { className: "c c--fill", cx: "80", cy: "101", r: "2.2" }),
+    /* @__PURE__ */ jsx("circle", { className: "c c--fill", cx: "89", cy: "101", r: "2.2" })
+  ] }),
+  dashboard: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "22", y: "24", width: "116", height: "72", rx: "8" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "34", y: "34", width: "26", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "40", y: "66", width: "13", height: "18", rx: "3.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "60", y: "56", width: "13", height: "28", rx: "3.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "m", x: "80", y: "42", width: "13", height: "42", rx: "3.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "100", y: "60", width: "13", height: "24", rx: "3.5" })
+  ] }),
+  html: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "22", y: "22", width: "116", height: "76", rx: "8" }),
+    /* @__PURE__ */ jsx("circle", { className: "l", cx: "33", cy: "32", r: "2.5" }),
+    /* @__PURE__ */ jsx("circle", { className: "l", cx: "41", cy: "32", r: "2.5" }),
+    /* @__PURE__ */ jsx("circle", { className: "l", cx: "49", cy: "32", r: "2.5" }),
+    /* @__PURE__ */ jsx("path", { className: "r", d: "M22.75 41h114.5" }),
+    /* @__PURE__ */ jsx("path", { className: "k", d: "M60 58l-11 9 11 9" }),
+    /* @__PURE__ */ jsx("path", { className: "k", d: "M100 58l11 9-11 9" }),
+    /* @__PURE__ */ jsx("path", { className: "k k--soft", d: "M86 54l-12 26" })
+  ] }),
+  sheet: /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { className: "b", x: "22", y: "22", width: "116", height: "76", rx: "8" }),
+    /* @__PURE__ */ jsx("path", { className: "r", d: "M22.75 40h114.5M22.75 54h114.5M22.75 68h114.5M22.75 82h114.5M60 22.75v74.5M100 22.75v74.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "30", y: "29", width: "22", height: "4.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "68", y: "29", width: "22", height: "4.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("rect", { className: "s", x: "108", y: "29", width: "22", height: "4.5", rx: "2.25" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "30", y: "45", width: "18", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "68", y: "45", width: "24", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "108", y: "45", width: "16", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "30", y: "59", width: "22", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "m", x: "64", y: "57", width: "32", height: "8", rx: "2.5" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "108", y: "59", width: "20", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "30", y: "73", width: "16", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "68", y: "73", width: "20", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "108", y: "73", width: "22", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "30", y: "87", width: "20", height: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("rect", { className: "l", x: "68", y: "87", width: "14", height: "4", rx: "2" })
+  ] })
+};
+function ArtifactKindGround({
+  kind,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("crewlet-kind-ground", `crewlet-kind--${kind}`, className), children: children ?? /* @__PURE__ */ jsx(ArtifactKindIllustration, { kind }) });
+}
+function ArtifactKindTile({ kind, label, href, badge, disabledReason, className }) {
+  const reasonId = useId();
+  const off = disabledReason !== void 0 || href === void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-kind-tile__frame", children: /* @__PURE__ */ jsx(ArtifactKindGround, { kind, className: "crewlet-kind-tile__ground" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-kind-tile__label", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-kind-tile__name", children: label }),
+      badge ? /* @__PURE__ */ jsx("span", { className: "crewlet-kind-tile__badge", children: badge }) : null
+    ] })
+  ] });
+  const name = badge ? `${label}, ${badge}` : label;
+  if (off) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "link",
+          tabIndex: 0,
+          "aria-label": name,
+          "aria-disabled": "true",
+          "aria-describedby": disabledReason ? reasonId : void 0,
+          title: disabledReason,
+          className: cx("crewlet-kind-tile", "crewlet-kind-tile--disabled", className),
+          children: body
+        }
+      ),
+      disabledReason ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx("a", { href, "aria-label": name, className: cx("crewlet-kind-tile", className), children: body });
+}
+
+export { ArtifactKindGround, ArtifactKindIllustration, ArtifactKindTile };

package/dist/{chunk-WTNUVQVI.js → chunk-UHJQDFKQ.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OTN35CI4.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-3P4Y5RX6.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-VVRL27HM.js → chunk-ULPL26BU.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-I3KKZ2O3.js';
+import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';
@@ -6,7 +6,7 @@ import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CommandPalette-HBTNKHZQ.css';
+import './CommandPalette-7CFGVBND.css';
 import { useId, useMemo, useRef, useEffect, useState } from 'react';
 import { ChevronLeftGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-EBJREOKS.js → chunk-UXXJDIYE.js}

@@ -1,14 +1,14 @@
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-I3KKZ2O3.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Modal } from './chunk-XEGZHHRH.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Menu } from './chunk-2HIOJ4YZ.js';
+import { Menu } from './chunk-3EB2AV3H.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 './DataTable-WZK3V62B.css';
+import './DataTable-NL2YWAIA.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-5LUI3WQP.js → chunk-V43UVX4H.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-7T42VQQT.js';
+import { Checkbox } from './chunk-CPEPST4S.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-W4XYY73O.js → chunk-VHZ3AXJD.js}

@@ -1,5 +1,5 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-NHBP2XS5.js → chunk-VI5FWDZW.js}

@@ -76,9 +76,9 @@ var SHEET_LABELS = {
   retry: "Retry",
   dismiss: "Dismiss",
   notSaved: (reason) => `Not saved: ${reason}`,
-  rowActions: (row) => `Row actions for row ${row}`,
+  rowActions: (row) => `Actions for row ${row}`,
   deleteRow: "Delete row",
-  rowActionsHelp: "Shift and F10 opens the actions of the row.",
+  rowActionsHelp: "Shift with F10 opens the actions of the row.",
   filter: "Filter options",
   noOptions: "No matching options",
   clear: "Clear",
@@ -541,6 +541,54 @@ function drawnColumns(columns) {
 }
 var isTypingKey = (key2) => key2.key.length === 1 && !isMod(key2) && !key2.altKey;
 
+// src/SheetModel/fit.ts
+var SHEET_COLUMN_BOUNDS = {
+  text: [120, 280],
+  longtext: [160, 320],
+  number: [80, 180],
+  checkbox: [72, 180],
+  select: [104, 240],
+  // A multi-select draws its chips on one line and counts the rest, so its
+  // values do not size it: its default is its floor, and its header may widen it.
+  multiselect: [SHEET_COLUMN_WIDTHS.multiselect, 280],
+  status: [112, 260],
+  person: [120, 240],
+  date: [112, 180],
+  url: [160, 280],
+  rating: [104, 180]
+};
+var SHEET_FIT_SAMPLES = 8;
+function fittedWidth(type, measured) {
+  if (!(measured > 0)) return SHEET_COLUMN_WIDTHS[type];
+  const [min, max] = SHEET_COLUMN_BOUNDS[type];
+  return Math.min(max, Math.max(min, Math.ceil(measured)));
+}
+function fitSamples(column, rows, context, limit = SHEET_FIT_SAMPLES) {
+  switch (column.type) {
+    case "select":
+    case "status":
+      return liveOptions(column).map((option) => option.id);
+    case "checkbox":
+    case "multiselect":
+      return [];
+    case "rating":
+      return [ratingMax(column)];
+    default: {
+      const longest = [];
+      for (const row of rows) {
+        const value = normalizeValue(column, row.values[column.field]);
+        if (isEmptyValue(value)) continue;
+        const length = displayText(column, value, context).length;
+        if (longest.length === limit && length <= longest[limit - 1].length) continue;
+        longest.push({ value, length });
+        longest.sort((a, b) => b.length - a.length);
+        if (longest.length > limit) longest.pop();
+      }
+      return longest.map((entry) => entry.value);
+    }
+  }
+}
+
 // src/SheetModel/clipboard.ts
 function quote(field) {
   return /[\t\n\r"]/.test(field) ? `"${field.replaceAll('"', '""')}"` : field;
@@ -835,4 +883,4 @@ function cellSpeech(column, row, context) {
   return spokenText(column, normalizeValue(column, row.values[column.field]), context);
 }
 
-export { LONGTEXT_MAX_DEFAULT, RATING_MAX_CEILING, RATING_MAX_DEFAULT, SHEET_COLUMN_TYPES, SHEET_COLUMN_WIDTHS, 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, 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 };
+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 };

package/dist/{chunk-HJEVSQN6.js → chunk-VL6CUNSX.js}

@@ -2,8 +2,8 @@ import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tabs-CJGO35BH.css';
-import React, { useRef, useLayoutEffect } from 'react';
+import './Tabs-MMZXV5EF.css';
+import React, { useRef, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function tabId(panelId, value) {
@@ -26,9 +26,12 @@ function Tabs({
   value,
   onValueChange,
   panelId,
-  renderItem
+  renderItem,
+  trailing,
+  ref
 }) {
   const navRef = useRef(null);
+  useImperativeHandle(ref, () => navRef.current, []);
   const { buttons, onKeyDown } = useRoving(items.length, null);
   useLayoutEffect(() => {
     if (variant !== "underline") return;
@@ -81,7 +84,7 @@ function Tabs({
       item.marker ? item.marker.tone === "danger" ? /* @__PURE__ */ jsxs("span", { className: "crewlet-tabs__marker crewlet-tabs__marker--danger", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: item.marker.count }),
         /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label })
-      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
+      ] }) : /* @__PURE__ */ jsx("span", { className: `crewlet-tabs__marker crewlet-tabs__marker--${item.marker.tone}`, children: /* @__PURE__ */ jsx(VisuallyHidden, { children: item.marker.label }) }) : item.count != null && item.count !== "" ? /* @__PURE__ */ jsx(Count, { value: item.count }) : null
     ] });
     const onSelect = () => {
       if (item.disabled) return;
@@ -112,7 +115,10 @@ function Tabs({
     );
   });
   if (renderItem) {
-    return /* @__PURE__ */ jsx("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: rows });
+    return /* @__PURE__ */ jsxs("nav", { ref: navRef, className: rootClass, "aria-label": ariaLabel, children: [
+      rows,
+      trailing
+    ] });
   }
   return /* @__PURE__ */ jsx("div", { ref: navRef, className: rootClass, "aria-label": ariaLabel, role: "tablist", children: rows });
 }

package/dist/{chunk-XDTYBF2F.js → chunk-W5XCNEZC.js}

@@ -32,5 +32,43 @@ function useFullscreen(ref) {
   }, [enter, exit, ref]);
   return { supported, active, enter, exit, toggle };
 }
+var IDLE_AFTER_MS = 2500;
+function useIdle(ref, enabled, timeout = IDLE_AFTER_MS) {
+  const [idle, setIdle] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) {
+      setIdle(false);
+      return void 0;
+    }
+    let timer;
+    const rest = () => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const focused = document.activeElement;
+        if (focused instanceof HTMLElement && focused !== el && el.contains(focused) && focused.matches(":focus-visible")) {
+          rest();
+          return;
+        }
+        setIdle(true);
+      }, timeout);
+    };
+    const wake = () => {
+      setIdle(false);
+      rest();
+    };
+    rest();
+    el.addEventListener("pointermove", wake);
+    el.addEventListener("pointerdown", wake);
+    el.addEventListener("focusin", wake);
+    return () => {
+      clearTimeout(timer);
+      el.removeEventListener("pointermove", wake);
+      el.removeEventListener("pointerdown", wake);
+      el.removeEventListener("focusin", wake);
+    };
+  }, [ref, enabled, timeout]);
+  return enabled && idle;
+}
 
-export { useFullscreen };
+export { IDLE_AFTER_MS, useFullscreen, useIdle };

package/dist/{chunk-LDJ3J4TQ.js → chunk-WGD2HX2A.js}

@@ -1,4 +1,4 @@
-import { Callout } from './chunk-SVSCLHHI.js';
+import { Callout } from './chunk-SZZRIHGT.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-FQCLKD7U.js → chunk-WKEPORNM.js}

@@ -1,2 +1,2 @@
-import './Tabs-CJGO35BH.css';
+import './Tabs-MMZXV5EF.css';
 import './SegmentedControl-FLI45IOW.css';

package/dist/{chunk-PJD2KFHX.js → chunk-WPX6A5BV.js}

@@ -1,16 +1,16 @@
-import { Note } from './chunk-CJKMURZO.js';
-import { CanvasToolbar, toolForKey } from './chunk-E6EWK5YY.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-OTN35CI4.js';
+import { Note } from './chunk-5SZGKSGL.js';
+import { CanvasToolbar, toolForKey } from './chunk-3Y56GQPM.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-3P4Y5RX6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasBoard-MBZVBWDO.css';
+import './CanvasBoard-5NNSKY6A.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
 import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/CanvasBoard/budget.ts
 var CANVAS_BOARD_MAX_LIVE = 12;
-var CANVAS_BOARD_MIN_LIVE_WIDTH = 160;
+var CANVAS_BOARD_MIN_LIVE_WIDTH = 96;
 function liveBoards(boards, view, viewport, max = CANVAS_BOARD_MAX_LIVE, minWidth = CANVAS_BOARD_MIN_LIVE_WIDTH) {
   if (max <= 0 || viewport.width <= 0 || viewport.height <= 0) return [];
   const ranked = [];
@@ -203,6 +203,16 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
   });
   return { preview, handle, pointer };
 }
+var sameSelection = (a, b) => a === b || a !== null && b !== null && a.kind === b.kind && a.id === b.id;
+function boardRoom(width, height) {
+  const title = width >= BOARD_TITLE_MIN_WIDTH;
+  if (width >= PLACEHOLDER_FULL.width && height >= PLACEHOLDER_FULL.height) return { title, lines: 2 };
+  if (width >= PLACEHOLDER_SIZE.width && height >= PLACEHOLDER_SIZE.height) return { title, lines: 1 };
+  return { title, lines: 0 };
+}
+var BOARD_TITLE_MIN_WIDTH = 40;
+var PLACEHOLDER_SIZE = { width: 96, height: 32 };
+var PLACEHOLDER_FULL = { width: 200, height: 64 };
 var TYPING = "input, textarea, select, [contenteditable='true']";
 function CanvasBoard({
   label,
@@ -220,6 +230,8 @@ function CanvasBoard({
   onNoteCreate,
   onOpen,
   onActivate,
+  selected: heldSelection,
+  onSelectedChange,
   controlsExtra,
   toolbar = true,
   labels,
@@ -232,7 +244,13 @@ function CanvasBoard({
   const [viewport, setViewport] = useState({ width: 0, height: 0 });
   const [active, setActive] = useState(null);
   const [editing, setEditing] = useState(null);
-  const [selected, setSelected] = useState(null);
+  const [ownSelection, setOwnSelection] = useState(null);
+  const selected = heldSelection !== void 0 ? heldSelection : ownSelection;
+  const setSelected = (next) => {
+    if (sameSelection(next, selected)) return;
+    if (heldSelection === void 0) setOwnSelection(next);
+    onSelectedChange?.(next);
+  };
   const [chosenTool, setTool] = useState("move");
   const [spaceHeld, setSpaceHeld] = useState(false);
   const canvas = useRef(null);
@@ -363,7 +381,7 @@ function CanvasBoard({
             label,
             content,
             largestItemWidth: largest || void 0,
-            ground: "dotted",
+            ground: "grid",
             cursor: TOOL_CURSOR[acting],
             minZoom: CANVAS_BOARD_MIN_ZOOM,
             refitOnResize: true,
@@ -382,10 +400,12 @@ function CanvasBoard({
                 const isLive = live.has(b.id);
                 const isActive = !editable && active === b.id && isLive;
                 const chosen = isSelected("board", b.id);
+                const room = boardRoom(b.w * view.k, b.h * view.k);
                 return /* @__PURE__ */ jsxs(
                   "section",
                   {
                     className: "crewlet-canvas-board__board",
+                    "data-untitled": !room.title || void 0,
                     "data-live": isLive || void 0,
                     "data-active": isActive || void 0,
                     "data-selected": chosen || void 0,
@@ -423,6 +443,7 @@ function CanvasBoard({
                           {
                             size: "sm",
                             variant: "ghost",
+                            className: "crewlet-canvas-board__open",
                             label: text.open(b.title),
                             icon: /* @__PURE__ */ jsx(MaximizeGlyph, {}),
                             onClick: () => onOpen(b.id)
@@ -430,11 +451,15 @@ function CanvasBoard({
                         )
                       ] }),
                       /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__body", children: [
-                        isLive ? renderBoard(b) : /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__placeholder", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-canvas-board__placeholder-text", children: [
-                          /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__placeholder-title", children: b.title }),
-                          /* @__PURE__ */ jsx("span", { children: text.size(b.w, b.h) }),
-                          /* @__PURE__ */ jsx("span", { children: text.paused })
-                        ] }) }),
+                        isLive ? renderBoard(b) : (
+                          // NAMED BY ITS TITLE ABOVE IT, as a live board is, so it
+                          // says only what a running board does not: its size and
+                          // why it is not running, as much of that as fits.
+                          /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__placeholder", children: room.lines > 0 && /* @__PURE__ */ jsxs("span", { className: "crewlet-canvas-board__placeholder-text", children: [
+                            /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__placeholder-size", children: text.size(b.w, b.h) }),
+                            room.lines > 1 && /* @__PURE__ */ jsx("span", { children: text.paused })
+                          ] }) })
+                        ),
                         !isActive && // A press here pans the canvas like the field around it;
                         // a click selects the board and a double-click hands a
                         // live board the pointer. The board's page stays
@@ -639,4 +664,4 @@ function NoteView({
   return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, ...paper, children: body });
 }
 
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, liveBoards, titleSize };
+export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize };