@crewlethq/ui 0.35.1 → 0.37.0

package/dist/{TimeWindowPicker-T763GLXH.css → TimeWindowPicker-DEFDV77Z.css}

@@ -47,10 +47,17 @@
  */
 .crewlet-time-window:focus-visible,
 .crewlet-time-window.is-open {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-time-window:focus-visible,
+:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window.is-disabled,
 .crewlet-time-window:disabled {
   opacity: 0.55;
@@ -318,10 +325,16 @@ svg.crewlet-time-window__tick {
  * own boundary (see Input.css), keyed on the box's own input.
  */
 .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
-  outline: 1px solid var(--color-focus);
+  outline: 2px solid var(--color-focus);
   outline-offset: -1px;
 }
 
+/* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
+:root[data-crewlet-focus='pointer'] .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+  outline-width: 1px;
+  outline-color: var(--color-border-selected);
+}
+
 .crewlet-time-window__masked-input {
   min-width: 0;
   /* The `size` attribute the component sets is what holds the width open in

package/dist/TreeCanvas/index.js

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

package/dist/VersionTimeline/index.js

@@ -1,10 +1,10 @@
-export { VersionTimeline } from '../chunk-VHZ3AXJD.js';
-import '../chunk-AUQPBL4O.js';
+export { VersionTimeline } from '../chunk-NQCY44B3.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
+import '../chunk-AUQPBL4O.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-V43UVX4H.js → chunk-27GD7LVR.js}

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

package/dist/{chunk-6JVRY5DQ.js → chunk-44WJLPQS.js}

@@ -1,7 +1,7 @@
-import { Composer } from './chunk-7DZDSSJS.js';
+import { Document } from './chunk-P6WFZDKS.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
-import { Document } from './chunk-TYKQ33CL.js';
+import { Composer } from './chunk-RH2NCQBZ.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-ONL54WMH.js → chunk-46RL3E54.js}

@@ -1,6 +1,6 @@
 import { useRoving } from './chunk-RKKO7QHH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './LayersList-NQZEIPZB.css';
+import './LayersList-TBNF4XGL.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var LAYERS_LIST_LABELS = {

package/dist/{chunk-UHJQDFKQ.js → chunk-4ZJLOKSS.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-3P4Y5RX6.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-4BYHAOHH.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-ACA27MZH.js → chunk-5QXRI35B.js}

@@ -2,7 +2,7 @@ import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Card-KJOYHDTJ.css';
+import './Card-QOVASQNU.css';
 import { createContext, useId, useState, isValidElement, useRef, useCallback, useMemo, Children, cloneElement, useContext, useEffect, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-LL5AFXU7.js → chunk-5RT5O4JR.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-LV4APO72.js';
+import { SlideStage } from './chunk-NQGPD6NX.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-GMU6SQ6B.js → chunk-66NGUD5S.js}

@@ -1,9 +1,9 @@
 import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-import { Popover } from './chunk-K3IJQNB7.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
-import { Input } from './chunk-6QFAK2WV.js';
+import { Popover } from './chunk-K3IJQNB7.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
+import { Input } from './chunk-IUYUS2SO.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';

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

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

package/dist/{chunk-2CQLNML5.js → chunk-AOLCZDZ6.js}

@@ -1,10 +1,11 @@
 import { Tag } from './chunk-GFV4LJHH.js';
 import { useListbox } from './chunk-F73MC7EZ.js';
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TagsInput-XMXTI5Q4.css';
+import './TagsInput-7EGBBXHS.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';
 import { CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -40,6 +41,7 @@ var TagsInput = forwardRef(function TagsInput2({
   "aria-describedby": describedBy,
   "aria-invalid": invalid
 }, ref) {
+  useFocusModality();
   const [draft, setDraft] = useState("");
   const [open, setOpen] = useState(false);
   const field = useRef(null);

package/dist/{chunk-NKZCJRKO.js → chunk-APDKUGSH.js}

@@ -1,13 +1,13 @@
-import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Tooltip } from './chunk-6ZJ3N7QI.js';
 import { SegmentedControl } from './chunk-CCAXYHQS.js';
 import { ArtifactIcon } from './chunk-ILDNJHRU.js';
+import { isApplePlatform, Kbd } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactBar-HV5AT4RG.css';
+import './ArtifactBar-FWPBBKQ5.css';
 import { useId, useState, useRef, useEffect } from 'react';
 import { ChevronLeftGlyph, EllipsisGlyph, ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/chunk-BGLKLXL3.js

@@ -0,0 +1,29 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactAccess-Y53ZTRFS.css';
+import { BuildingComplexGlyph, UsersGlyph, LockGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ARTIFACT_ACCESSES = ["private", "shared", "company"];
+var ACCESS_GLYPHS = {
+  private: LockGlyph,
+  shared: UsersGlyph,
+  company: BuildingComplexGlyph
+};
+var ARTIFACT_ACCESS_LABELS = {
+  private: "Private",
+  shared: "Shared",
+  company: "Company"
+};
+function ArtifactAccessGlyph({ access, size = "sm" }) {
+  const Drawn = ACCESS_GLYPHS[access];
+  return /* @__PURE__ */ jsx(Drawn, { size });
+}
+function ArtifactAccessLabel({ access, label, title, className }) {
+  const word = label ?? ARTIFACT_ACCESS_LABELS[access];
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-artifact-access", `crewlet-artifact-access--${access}`, className), title: title ?? word, children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-access__glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ArtifactAccessGlyph, { access }) }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-access__word", children: word })
+  ] });
+}
+
+export { ARTIFACT_ACCESSES, ARTIFACT_ACCESS_LABELS, ArtifactAccessGlyph, ArtifactAccessLabel };

package/dist/{chunk-Z6VW6CXX.js → chunk-BIQDJOJZ.js}

@@ -1,4 +1,4 @@
-import { FormField, Textarea, Input } from './chunk-6QFAK2WV.js';
+import { FormField, Textarea, Input } from './chunk-IUYUS2SO.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { announce } from './chunk-RSAQOKH3.js';

package/dist/{chunk-YSJC7AZC.js → chunk-BWOIUOO3.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceButtons-DJ5EOGUA.css';
+import './ChoiceButtons-FLIFXFFS.css';
 import { useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/{chunk-PI7HKLIT.js → chunk-D7GNNID2.js}

@@ -1,6 +1,7 @@
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SourceEditor-G2C3STPX.css';
+import './SourceEditor-QAYE2JS6.css';
 import { forwardRef, useRef, useId, useState, useImperativeHandle, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -37,6 +38,7 @@ var SourceEditor = forwardRef(
     "aria-describedby": describedBy,
     ...rest
   }, ref) {
+    useFocusModality();
     const field = useRef(null);
     const tabLeaves = useRef(false);
     const keysId = useId();

package/dist/chunk-EAKC24BW.js

@@ -0,0 +1,51 @@
+import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactKinds-CVD3FCYO.css';
+import './ArtifactMakeRow-XBA2MPSY.css';
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ArtifactMakeRow({
+  items,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-make-row", className), children: /* @__PURE__ */ jsx("ul", { className: "crewlet-make-row__list", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "crewlet-make-row__cell", children: /* @__PURE__ */ jsx(MakeItem, { item }) }, item.kind)) }) });
+}
+function MakeItem({ item }) {
+  const { kind, label, detail, href, disabledReason } = item;
+  const detailId = useId();
+  const reasonId = useId();
+  const off = disabledReason !== void 0 || href === void 0;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: cx("crewlet-make-row__mark", `crewlet-kind--${kind}`), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "sm" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-make-row__words", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-make-row__name", children: label }),
+      detail ? /* @__PURE__ */ jsx("span", { id: detailId, className: "crewlet-make-row__detail", children: detail }) : null
+    ] })
+  ] });
+  const describedBy = detail ? detailId : void 0;
+  if (off) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "link",
+          tabIndex: 0,
+          "aria-label": label,
+          "aria-disabled": "true",
+          "aria-describedby": disabledReason ? reasonId : describedBy,
+          title: disabledReason,
+          className: "crewlet-make-row__item crewlet-make-row__item--disabled",
+          children: body
+        }
+      ),
+      disabledReason ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx("a", { href, "aria-label": label, "aria-describedby": describedBy, className: "crewlet-make-row__item", children: body });
+}
+
+export { ArtifactMakeRow };

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

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

package/dist/chunk-EOQFPZEE.js

@@ -0,0 +1,138 @@
+import { Timeline } from './chunk-AUQPBL4O.js';
+import { Section } from './chunk-3TFDQLW3.js';
+import { Disclosure } from './chunk-MICH6QSJ.js';
+import { Composer } from './chunk-RH2NCQBZ.js';
+import { ArtifactPanel } from './chunk-Y5BD4MTE.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AgentHandoffPanel-JWSW62GU.css';
+import { useId, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AGENT_HANDOFF_LABELS = {
+  title: "Ask an agent",
+  brief: "Brief",
+  starters: "Start from",
+  agent: "Who builds it",
+  carried: "Goes with it",
+  task: "The task as it is filed",
+  next: "What happens next",
+  step: "Step"
+};
+function AgentHandoffPanel({
+  onClose,
+  icon,
+  focusOnOpen,
+  intro,
+  brief,
+  onBriefChange,
+  briefLabel,
+  briefPlaceholder,
+  briefHelper,
+  briefMaxLength,
+  briefRef,
+  starters = [],
+  onStarter,
+  children,
+  agent,
+  carried = [],
+  task,
+  steps = [],
+  notice,
+  send,
+  labels,
+  className
+}) {
+  const words = { ...AGENT_HANDOFF_LABELS, ...labels };
+  const briefId = useId();
+  const helperId = useId();
+  const held = send.disabledReason !== void 0 || send.busy === true;
+  const press = () => {
+    if (!held) send.onSend();
+  };
+  const body = useRef(null);
+  const sendNow = useRef(press);
+  sendNow.current = press;
+  useEffect(() => {
+    const root = body.current;
+    if (!root) return void 0;
+    const doc = root.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.isComposing) return;
+      if (event.key !== "Enter" || !(event.metaKey || event.ctrlKey)) return;
+      if (!(event.target instanceof Node) || !root.contains(event.target)) return;
+      event.preventDefault();
+      sendNow.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ArtifactPanel,
+    {
+      title: words.title,
+      icon,
+      onClose,
+      focusOnOpen,
+      className: cx("crewlet-agent-handoff", className),
+      footer: /* @__PURE__ */ jsxs("div", { className: "crewlet-agent-handoff__foot", children: [
+        send.disabledReason && !send.busy ? /* @__PURE__ */ jsx("p", { className: "crewlet-agent-handoff__reason", children: send.disabledReason }) : null,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "crewlet-agent-handoff__send",
+            variant: "primary",
+            block: true,
+            leadingIcon: send.media ? /* @__PURE__ */ jsx("span", { className: "crewlet-agent-handoff__media", "aria-hidden": true, children: send.media }) : void 0,
+            loading: send.busy,
+            disabledReason: send.busy ? void 0 : send.disabledReason,
+            onClick: press,
+            children: send.label
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { ref: body, className: "crewlet-agent-handoff__body", children: [
+        intro ? /* @__PURE__ */ jsx("p", { className: "crewlet-agent-handoff__intro", children: intro }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-agent-handoff__brief", children: [
+          /* @__PURE__ */ jsx("label", { className: "crewlet-agent-handoff__label", htmlFor: briefId, children: briefLabel ?? words.brief }),
+          /* @__PURE__ */ jsx(
+            Composer,
+            {
+              ref: briefRef,
+              id: briefId,
+              label: briefLabel ?? words.brief,
+              "aria-describedby": briefHelper ? helperId : void 0,
+              value: brief,
+              onChange: onBriefChange,
+              onSubmit: press,
+              placeholder: briefPlaceholder,
+              maxLength: briefMaxLength,
+              rows: 4
+            }
+          ),
+          briefHelper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "crewlet-agent-handoff__helper", children: briefHelper }) : null,
+          starters.length > 0 && onStarter && brief.trim() === "" ? /* @__PURE__ */ jsx("div", { className: "crewlet-agent-handoff__starters", role: "group", "aria-label": words.starters, children: starters.map((s) => /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => onStarter(s.key), children: s.label }, s.key)) }) : null
+        ] }),
+        children,
+        /* @__PURE__ */ jsx(Section, { title: words.agent, className: "crewlet-agent-handoff__section", children: agent }),
+        carried.length > 0 || task ? /* @__PURE__ */ jsxs(Section, { title: words.carried, className: "crewlet-agent-handoff__section", children: [
+          carried.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "crewlet-agent-handoff__carried", children: carried.map((item) => /* @__PURE__ */ jsxs("li", { className: "crewlet-agent-handoff__item", children: [
+            item.icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-agent-handoff__item-icon", "aria-hidden": true, children: item.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-agent-handoff__item-words", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-agent-handoff__item-label", children: item.label }),
+              item.detail ? /* @__PURE__ */ jsx("span", { className: "crewlet-agent-handoff__item-detail", children: item.detail }) : null
+            ] })
+          ] }, item.key)) }) : null,
+          task ? /* @__PURE__ */ jsx(Disclosure, { title: words.task, size: "compact", headingLevel: "none", lazy: true, children: /* @__PURE__ */ jsxs("div", { className: "crewlet-agent-handoff__task", children: [
+            /* @__PURE__ */ jsx("p", { className: "crewlet-agent-handoff__task-title", children: task.title }),
+            /* @__PURE__ */ jsx("pre", { className: "crewlet-agent-handoff__task-body", children: task.body })
+          ] }) }) : null
+        ] }) : null,
+        steps.length > 0 ? /* @__PURE__ */ jsx(Section, { title: words.next, className: "crewlet-agent-handoff__section", children: /* @__PURE__ */ jsx(Timeline, { itemLabel: words.step, children: steps.map((step, i) => /* @__PURE__ */ jsx(Timeline.Item, { children: step }, i)) }) }) : null,
+        notice
+      ] })
+    }
+  );
+}
+
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel };

package/dist/{chunk-THROPJZC.js → chunk-F23N4MVU.js}

@@ -1,5 +1,5 @@
 import { SlideNav } from './chunk-6VOS2GMB.js';
-import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-LV4APO72.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-NQGPD6NX.js';
 import { Eyebrow } from './chunk-RK4XPHVG.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-J6YZ4IYV.js → chunk-FG4O64DV.js}

@@ -1,9 +1,9 @@
-import { Select } from './chunk-BQ7AKL2N.js';
+import { Select } from './chunk-VKKUGZ3G.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
 import { HueSwatch } from './chunk-SUXP4OBT.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Checkbox } from './chunk-CPEPST4S.js';
-import { FormField, Input } from './chunk-6QFAK2WV.js';
+import { Checkbox } from './chunk-PJIPUEJ3.js';
+import { FormField, Input } from './chunk-IUYUS2SO.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-E35CMI5D.js → chunk-FHHYXZSP.js}

@@ -1,9 +1,9 @@
 import { Note } from './chunk-5SZGKSGL.js';
-import { CanvasToolbar, toolForKey } from './chunk-3Y56GQPM.js';
-import { IDENTITY_VIEW, Canvas } from './chunk-3P4Y5RX6.js';
+import { CanvasToolbar, toolForKey } from './chunk-7VAUGG6B.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-4BYHAOHH.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CanvasBoard-5NNSKY6A.css';
+import './CanvasBoard-TS4P356F.css';
 import { useState, useRef, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
 import { MaximizeGlyph, PencilGlyph, TrashGlyph, MousePointer2Glyph, HandGlyph, FrameGlyph, TypeGlyph, StickyNoteGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -207,12 +207,23 @@ function useFrameGestures(zoom, minSide, maxSide, commit) {
 }
 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 };
+  if (width >= PLACEHOLDER_FULL.width && height >= PLACEHOLDER_FULL.height) return { lines: 2 };
+  if (width >= PLACEHOLDER_SIZE.width && height >= PLACEHOLDER_SIZE.height) return { lines: 1 };
+  return { lines: 0 };
 }
-var BOARD_TITLE_MIN_WIDTH = 40;
+function boardName(title, position, room) {
+  const letters = Array.from(title).length;
+  if (room >= (Math.min(letters, BOARD_NAME_MIN_CHARS) + 1) * NAME_GLYPH_PX) {
+    return { text: title, whole: room >= letters * NAME_GLYPH_PX };
+  }
+  const number = String(position);
+  if (room >= number.length * NAME_GLYPH_PX) return { text: number, whole: false };
+  return null;
+}
+var BOARD_NAME_MIN_CHARS = 3;
+var NAME_GLYPH_PX = 9;
+var HANDLE_END = 9;
+var OPEN_CONTROL = 30;
 var PLACEHOLDER_SIZE = { width: 96, height: 32 };
 var PLACEHOLDER_FULL = { width: 200, height: 64 };
 var TYPING = "input, textarea, select, [contenteditable='true']";
@@ -412,16 +423,21 @@ function CanvasBoard({
             },
             ref: canvas,
             children: /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__layer", style: zoomVar, children: [
-              drawnBoards.map((b) => {
+              drawnBoards.map((b, index) => {
                 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);
+                const name = boardName(
+                  b.title,
+                  index + 1,
+                  b.w * view.k - (editable ? HANDLE_END : 0) - (onOpen ? OPEN_CONTROL : 0)
+                );
                 return /* @__PURE__ */ jsxs(
                   "section",
                   {
                     className: "crewlet-canvas-board__board",
-                    "data-untitled": !room.title || void 0,
+                    "data-untitled": !name || void 0,
                     "data-live": isLive || void 0,
                     "data-active": isActive || void 0,
                     "data-selected": chosen || void 0,
@@ -436,9 +452,10 @@ function CanvasBoard({
                             className: "crewlet-canvas-board__title crewlet-canvas-board__handle",
                             "aria-label": text.move(b.title),
                             "aria-pressed": chosen,
+                            title: name?.whole === false ? b.title : void 0,
                             onFocus: () => setSelected({ kind: "board", id: b.id }),
                             ...boardGestures.handle(b.id, "move", b),
-                            children: b.title
+                            children: name?.text ?? b.title
                           }
                         ) : (
                           // The name selects its board, as a press on the board
@@ -449,8 +466,9 @@ function CanvasBoard({
                             "span",
                             {
                               className: "crewlet-canvas-board__title",
+                              title: name?.whole === false ? b.title : void 0,
                               onClick: () => setSelected({ kind: "board", id: b.id }),
-                              children: b.title
+                              children: name?.text ?? b.title
                             }
                           )
                         ),
@@ -680,4 +698,4 @@ function NoteView({
   return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, ...paper, children: body });
 }
 
-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 };
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize };

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

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-QS4ZGTEU.js';
+import { Combobox } from './chunk-PPFX6GRK.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/{chunk-ZB5O3ELS.js → chunk-GRYZ5EP3.js}

@@ -2,7 +2,7 @@ import { Tag } from './chunk-GFV4LJHH.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DatasetSource-XFPZBRXL.css';
+import './DatasetSource-SMGX4PS5.css';
 import { useId, Children, isValidElement } from 'react';
 import { ClockGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
@@ -40,6 +40,7 @@ function DatasetSource({
   const text = { ...LABELS, ...labels, kinds: { ...LABELS.kinds, ...labels?.kinds } };
   const titleId = useId();
   const blocked = status === "refused" || status === "failed";
+  const open = selected && children !== void 0 && children !== null && children !== false;
   const state = status === "loading" ? /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__state", children: text.loading }) : blocked ? /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__state crewlet-dataset-source__state--blocked", children: detail ?? (status === "refused" ? text.refused : text.failed) }) : status === "live" ? /* @__PURE__ */ jsx("span", { className: "crewlet-dataset-source__state", children: text.live }) : asOf !== void 0 && asOf !== null ? /* @__PURE__ */ jsxs("span", { className: "crewlet-dataset-source__state", children: [
     text.asOf,
     " ",
@@ -87,12 +88,13 @@ function DatasetSource({
         "crewlet-dataset-source",
         `crewlet-dataset-source--${status}`,
         selected && "crewlet-dataset-source--selected",
+        open && "crewlet-dataset-source--open",
         className
       ),
       "aria-busy": status === "loading" || void 0,
       children: [
         onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-dataset-source__summary", "aria-pressed": selected, onClick: onSelect, children: summary }) : /* @__PURE__ */ jsx("div", { className: "crewlet-dataset-source__summary", children: summary }),
-        selected && children ? /* @__PURE__ */ jsx("div", { className: "crewlet-dataset-source__preview", role: "group", "aria-labelledby": titleId, children }) : null
+        open ? /* @__PURE__ */ jsx("div", { className: "crewlet-dataset-source__preview", role: "group", "aria-labelledby": titleId, children }) : null
       ]
     }
   );

package/dist/{chunk-QFNWMWWY.js → chunk-GS7ZTHPF.js}

@@ -1,12 +1,12 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DataTable } from './chunk-22CQQDFW.js';
-import { DateTimePicker } from './chunk-73A7D5CE.js';
+import { DataTable } from './chunk-JML75PGJ.js';
+import { DateTimePicker } from './chunk-L4WZSVMT.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { Popover } from './chunk-K3IJQNB7.js';
-import { Input } from './chunk-6QFAK2WV.js';
-import { Kbd } from './chunk-SMBKXWML.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Input } from './chunk-IUYUS2SO.js';
+import { Kbd } from './chunk-SMBKXWML.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-ILAEBSLJ.js → chunk-H5NOLRGH.js}

@@ -1,6 +1,6 @@
-import { SlideStage } from './chunk-LV4APO72.js';
+import { SlideStage } from './chunk-NQGPD6NX.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideGrid-S4LTJ4UU.css';
+import './SlideGrid-FJA33DV4.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';