@crewlethq/ui 0.35.1 → 0.36.0

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-QFNWMWWY.js → chunk-ES4RKQ7B.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-XMRTFPWX.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-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-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';
 

package/dist/{chunk-W3UVOZKL.js → chunk-IPAU6FLH.js}

@@ -2,9 +2,10 @@ import { ThemeSwatch } from './chunk-MNFU2RNT.js';
 import { useHighlightRest } from './chunk-F73MC7EZ.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ThemeGallery-HSUKBDWY.css';
+import './ThemeGallery-X35Y25EX.css';
 import { useId } from 'react';
 import { themeGroups, themeRegistry } from '@crewlethq/tokens';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function ThemeGallery({
@@ -79,7 +80,10 @@ function ThemeGallery({
                     onMouseEnter: () => preview.rest(theme.id),
                     children: [
                       renderPreview ? /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__preview", "aria-hidden": "true", children: renderPreview(theme) }) : theme.swatch ? /* @__PURE__ */ jsx(ThemeSwatch, { swatch: theme.swatch, size: "card" }) : null,
-                      /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__name", children: theme.name })
+                      /* @__PURE__ */ jsxs("span", { className: "crewlet-theme-gallery__label", children: [
+                        /* @__PURE__ */ jsx("span", { className: "crewlet-theme-gallery__name", children: theme.name }),
+                        chosen ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-theme-gallery__check", "aria-hidden": "true" }) : null
+                      ] })
                     ]
                   },
                   theme.id

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

@@ -1,7 +1,7 @@
-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';
+import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';

package/dist/{chunk-6QFAK2WV.js → chunk-IUYUS2SO.js}

@@ -1,8 +1,9 @@
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Input-GBZSFXLU.css';
+import './Input-ABGOFENS.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -21,6 +22,7 @@ var Input = forwardRef(function Input2({
   disabled,
   ...rest
 }, ref) {
+  useFocusModality();
   const field = useRef(null);
   const [typed, setTyped] = useState(() => String(rest.defaultValue ?? "") !== "");
   const controlled = rest.value !== void 0;
@@ -80,6 +82,7 @@ function InputAffix({ text, id, sentence }) {
   ] });
 }
 var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false, trailing, className = "", value, disabled, ...rest }, ref) {
+  useFocusModality();
   const localRef = useRef(null);
   useImperativeHandle(ref, () => localRef.current);
   useEffect(() => {

package/dist/{chunk-AXBRWRGV.js → chunk-JQLS3MZB.js}

@@ -1,4 +1,4 @@
-import { Document } from './chunk-TYKQ33CL.js';
+import { Document } from './chunk-P6WFZDKS.js';
 import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCover-D4MBEJ5H.css';

package/dist/{chunk-FGYET26P.js → chunk-KJW2AS57.js}

@@ -1,5 +1,5 @@
 import { InlineCode } from './chunk-5CLW2CXT.js';
-import { FormField, Input } from './chunk-6QFAK2WV.js';
+import { FormField, Input } from './chunk-IUYUS2SO.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function confirmMatches(typed, phrase) {

package/dist/{chunk-QIXMNOBD.js → chunk-KYZMN6I6.js}

@@ -1,10 +1,10 @@
-import { SlideStage } from './chunk-LV4APO72.js';
+import { SlideStage } from './chunk-NQGPD6NX.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
 import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
 import { Menu } from './chunk-BUVCV3WI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideFilmstrip-4ITZLMO4.css';
+import './SlideFilmstrip-PAT7P4OG.css';
 import { useRef, useLayoutEffect, useState } from 'react';
 import { EyeOffGlyph, GripVerticalGlyph, EllipsisGlyph, CopyGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-73A7D5CE.js → chunk-L4WZSVMT.js}

@@ -1,9 +1,10 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Popover } from './chunk-K3IJQNB7.js';
+import { useFocusModality } from './chunk-YSGLEHND.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DateTimePicker-HG2KQXQ6.css';
+import './DateTimePicker-2IVTKFV2.css';
 import { useMemo, useState, useEffect } from 'react';
 import { CalendarGlyph, ChevronDownGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -94,6 +95,7 @@ function DateTimePicker({
   size = "md",
   labels: labelOverrides
 }) {
+  useFocusModality();
   const labels = useMemo(
     () => labelOverrides ? { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...labelOverrides } : DEFAULT_DATE_TIME_PICKER_LABELS,
     [labelOverrides]

package/dist/{chunk-W7QBBKUE.js → chunk-MJW6SQYB.js}

@@ -1,8 +1,9 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactKinds-CVD3FCYO.css';
-import './ArtifactKindIllustration-5FPRJQ3P.css';
+import './ArtifactKindIllustration-5KTP43QS.css';
 import { useId } from 'react';
+import { CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function ArtifactKindIllustration({ kind, className }) {
@@ -100,6 +101,7 @@ function ArtifactKindTile({
   label,
   href,
   onSelect,
+  selected,
   face,
   detail,
   badge,
@@ -113,7 +115,8 @@ function ArtifactKindTile({
     /* @__PURE__ */ jsx("span", { className: "crewlet-kind-tile__frame", children: /* @__PURE__ */ jsx(ArtifactKindGround, { kind, className: "crewlet-kind-tile__ground", children: face }) }),
     /* @__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
+      badge ? /* @__PURE__ */ jsx("span", { className: "crewlet-kind-tile__badge", children: badge }) : null,
+      selected && href === void 0 ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs", className: "crewlet-kind-tile__check", "aria-hidden": "true" }) : null
     ] }),
     detail ? /* @__PURE__ */ jsx("span", { id: detailId, className: "crewlet-kind-tile__detail", children: detail }) : null
   ] });
@@ -144,7 +147,8 @@ function ArtifactKindTile({
         type: "button",
         "aria-label": name,
         "aria-describedby": describedBy,
-        className: cx("crewlet-kind-tile", "crewlet-kind-tile--button", className),
+        "aria-pressed": selected,
+        className: cx("crewlet-kind-tile", "crewlet-kind-tile--button", selected && "is-selected", className),
         onClick: onSelect,
         children: body
       }

package/dist/{chunk-GMU6SQ6B.js → chunk-MRMHZ437.js}

@@ -1,12 +1,12 @@
 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 { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Switcher-K3EPA2RB.css';

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

@@ -1,6 +1,6 @@
 import { Modal } from './chunk-XEGZHHRH.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-6QFAK2WV.js';
+import { Input } from './chunk-IUYUS2SO.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-R25RGPUB.js';

package/dist/{chunk-LV4APO72.js → chunk-NQGPD6NX.js}

@@ -1,6 +1,6 @@
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SlideStage-S2FISF4C.css';
+import './SlideStage-ZTTEQSS2.css';
 import { useRef, useState, useLayoutEffect, useEffect } from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-7UYONN6K.js → chunk-OSZDHN5Z.js}

@@ -1,8 +1,8 @@
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { ArtifactKindGround } from './chunk-W7QBBKUE.js';
-import { Card } from './chunk-ACA27MZH.js';
+import { ArtifactKindGround } from './chunk-MJW6SQYB.js';
+import { Card } from './chunk-5QXRI35B.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/chunk-P6WFZDKS.js

@@ -0,0 +1,111 @@
+import { useFocusModality } from './chunk-YSGLEHND.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Document-YFWTWXJP.css';
+import { forwardRef, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function Document({ as: Tag = "div", size = "md", measure = "normal", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ...rest,
+      className: cx(
+        "crewlet-document",
+        `crewlet-document--${size}`,
+        measure === "normal" && "crewlet-document--measure",
+        className
+      ),
+      children
+    }
+  );
+}
+function DocumentTitle({ as: Tag = "h1", className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(Tag, { ...rest, className: cx("crewlet-document-title", className), children });
+}
+var LINE_BREAKS = /\r\n|[\r\n\u2028\u2029]/g;
+var DocumentTitleField = forwardRef(function DocumentTitleField2({ error = false, className, onChange, onKeyDown, value, defaultValue, ...rest }, forwarded) {
+  useFocusModality();
+  const own = useRef(null);
+  const ref = useCallback(
+    (element) => {
+      own.current = element;
+      if (typeof forwarded === "function") forwarded(element);
+      else if (forwarded) forwarded.current = element;
+    },
+    [forwarded]
+  );
+  const fit = useCallback(() => {
+    const element = own.current;
+    if (!element) return;
+    element.style.height = "auto";
+    const style = getComputedStyle(element);
+    const edges = style.boxSizing === "border-box" ? parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) : -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
+    element.style.height = `${element.scrollHeight + (Number.isFinite(edges) ? edges : 0)}px`;
+  }, []);
+  useLayoutEffect(fit, [fit, value]);
+  useEffect(() => {
+    const element = own.current;
+    if (!element || typeof ResizeObserver === "undefined") return void 0;
+    let width = element.clientWidth;
+    const observer = new ResizeObserver(() => {
+      if (element.clientWidth === width) return;
+      width = element.clientWidth;
+      fit();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [fit]);
+  useEffect(() => {
+    const element = own.current;
+    if (!element) return void 0;
+    const refuse = (event) => {
+      if (event.inputType === "insertLineBreak" || event.inputType === "insertParagraph") event.preventDefault();
+    };
+    element.addEventListener("beforeinput", refuse);
+    return () => element.removeEventListener("beforeinput", refuse);
+  }, []);
+  const change = (event) => {
+    const element = event.currentTarget;
+    if (LINE_BREAKS.test(element.value)) {
+      LINE_BREAKS.lastIndex = 0;
+      const caret = element.selectionStart;
+      element.value = element.value.replace(LINE_BREAKS, " ");
+      element.setSelectionRange(caret, caret);
+    }
+    LINE_BREAKS.lastIndex = 0;
+    onChange?.(event);
+    if (value === void 0) fit();
+  };
+  const keyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key !== "Enter" || event.defaultPrevented || event.nativeEvent.isComposing) return;
+    const form = event.currentTarget.form;
+    if (!form) return;
+    const submitter = form.querySelector(
+      'button[type="submit"], button:not([type]), input[type="submit"], input[type="image"]'
+    );
+    if (submitter) {
+      if (!submitter.disabled) form.requestSubmit(submitter);
+      return;
+    }
+    const fields = form.querySelectorAll('input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), textarea');
+    if (fields.length === 1) form.requestSubmit();
+  };
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...rest,
+      ref,
+      rows: 1,
+      value,
+      defaultValue,
+      "aria-multiline": "false",
+      "aria-invalid": error || void 0,
+      className: cx("crewlet-document-title", "crewlet-document-title-field", className),
+      onChange: change,
+      onKeyDown: keyDown
+    }
+  );
+});
+
+export { Document, DocumentTitle, DocumentTitleField };

package/dist/{chunk-CPEPST4S.js → chunk-PJIPUEJ3.js}

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

package/dist/{chunk-QS4ZGTEU.js → chunk-PPFX6GRK.js}

@@ -1,5 +1,5 @@
 import { useListbox } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-6QFAK2WV.js';
+import { Input } from './chunk-IUYUS2SO.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Combobox-4FUVYIE7.css';
 import { forwardRef, useId, useMemo, useRef, useCallback } from 'react';