@crewlethq/ui 0.81.2 → 0.83.0

package/dist/chunk-SPNTUQBV.js

@@ -0,0 +1,244 @@
+import { Popover } from './chunk-EC6EUIAD.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
+import { Input } from './chunk-O7N6W52M.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
+import './EmojiPicker-FMWYN2WX.css';
+import { useId, useState, useRef, useMemo } from 'react';
+import { SearchGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/EmojiPicker/emoji.ts
+var entries = (pairs) => pairs.map(([emoji, name]) => ({ emoji, name }));
+var EMOJI_GROUPS = [
+  {
+    label: "Frequently used",
+    items: entries([
+      ["\u{1F44D}", "thumbs up"],
+      ["\u2705", "check"],
+      ["\u{1F440}", "eyes"],
+      ["\u{1F64C}", "raised hands"],
+      ["\u{1F680}", "rocket"],
+      ["\u{1F389}", "party"],
+      ["\u{1F64F}", "thanks"],
+      ["\u2764\uFE0F", "heart"]
+    ])
+  },
+  {
+    label: "Smileys",
+    items: entries([
+      ["\u{1F600}", "grin"],
+      ["\u{1F604}", "smile"],
+      ["\u{1F602}", "joy"],
+      ["\u{1F642}", "slight smile"],
+      ["\u{1F60D}", "heart eyes"],
+      ["\u{1F914}", "thinking"],
+      ["\u{1F605}", "sweat smile"],
+      ["\u{1F62E}", "open mouth"],
+      ["\u{1F62C}", "grimace"],
+      ["\u{1F634}", "sleeping"],
+      ["\u{1F92F}", "mind blown"],
+      ["\u{1F973}", "partying"],
+      ["\u{1F60E}", "cool"],
+      ["\u{1FAE1}", "salute"],
+      ["\u{1F91D}", "handshake"],
+      ["\u{1F44F}", "clap"]
+    ])
+  },
+  {
+    label: "Work",
+    items: entries([
+      ["\u{1F525}", "fire"],
+      ["\u{1F4AF}", "hundred"],
+      ["\u26A0\uFE0F", "warning"],
+      ["\u274C", "cross"],
+      ["\u23F3", "hourglass"],
+      ["\u{1F4CC}", "pin"],
+      ["\u{1F4CE}", "paperclip"],
+      ["\u{1F9EA}", "test tube"],
+      ["\u{1F41B}", "bug"],
+      ["\u{1F6E0}\uFE0F", "tools"],
+      ["\u{1F4C8}", "chart up"],
+      ["\u{1F4C9}", "chart down"],
+      ["\u{1F512}", "lock"],
+      ["\u{1F511}", "key"],
+      ["\u{1F4A1}", "idea"],
+      ["\u{1F4DD}", "memo"]
+    ])
+  }
+];
+function emojiName(emoji, groups = EMOJI_GROUPS) {
+  for (const group of groups) {
+    const found = group.items.find((item) => item.emoji === emoji);
+    if (found) return found.name;
+  }
+  return emoji;
+}
+function searchEmoji(query, groups = EMOJI_GROUPS) {
+  const words = query.trim().toLowerCase();
+  if (!words) return null;
+  const seen = /* @__PURE__ */ new Set();
+  const found = [];
+  for (const group of groups) {
+    for (const item of group.items) {
+      if (seen.has(item.emoji) || !item.name.toLowerCase().includes(words)) continue;
+      seen.add(item.emoji);
+      found.push(item);
+    }
+  }
+  return found;
+}
+var EMOJI_PICKER_COLUMNS = 8;
+var EMOJI_PICKER_LABELS = {
+  search: "Search emoji",
+  results: "Results",
+  none: (query) => `No emoji match \u201C${query}\u201D.`
+};
+function layout(groups) {
+  let index = 0;
+  let row = 0;
+  const drawn = groups.map((group) => {
+    const cells = group.items.map((entry, at) => ({
+      entry,
+      index: index + at,
+      row: row + Math.floor(at / EMOJI_PICKER_COLUMNS),
+      column: at % EMOJI_PICKER_COLUMNS
+    }));
+    index += group.items.length;
+    row += Math.ceil(group.items.length / EMOJI_PICKER_COLUMNS);
+    return { label: group.label, cells };
+  });
+  return { drawn, cells: drawn.flatMap((group) => group.cells) };
+}
+function EmojiPicker({
+  label,
+  tooltip,
+  onPick,
+  trigger,
+  onOpenChange,
+  align = "end",
+  side = "bottom",
+  groups = EMOJI_GROUPS,
+  labels: overrides
+}) {
+  const labels = overrides ? { ...EMOJI_PICKER_LABELS, ...overrides } : EMOJI_PICKER_LABELS;
+  const id = useId();
+  const [query, setQuery] = useState("");
+  const [at, setAt] = useState(0);
+  const field = useRef(null);
+  const grid = useRef(null);
+  const found = useMemo(() => searchEmoji(query, groups), [query, groups]);
+  const { drawn, cells } = useMemo(
+    () => layout(found ? [{ label: labels.results, items: found }] : groups),
+    [found, groups, labels.results]
+  );
+  const stop = Math.min(at, Math.max(0, cells.length - 1));
+  const focusCell = (index) => {
+    setAt(index);
+    grid.current?.querySelector(`[data-emoji-index="${index}"]`)?.focus();
+  };
+  function onFieldKeys(event, close) {
+    if (isComposing(event)) return;
+    if (event.key === "ArrowDown" && cells.length > 0) {
+      event.preventDefault();
+      focusCell(0);
+    } else if (event.key === "Enter" && found && found[0]) {
+      event.preventDefault();
+      onPick(found[0].emoji);
+      close();
+    }
+  }
+  function onCellKeys(event, cell) {
+    let next;
+    if (event.key === "ArrowRight") next = cells[cell.index + 1];
+    else if (event.key === "ArrowLeft") next = cells[cell.index - 1];
+    else if (event.key === "Home") next = cells[0];
+    else if (event.key === "End") next = cells[cells.length - 1];
+    else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const row = cell.row + (event.key === "ArrowDown" ? 1 : -1);
+      const inRow = cells.filter((candidate) => candidate.row === row);
+      if (inRow.length === 0) {
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          field.current?.focus();
+        }
+        return;
+      }
+      next = inRow.find((candidate) => candidate.column === cell.column) ?? inRow[inRow.length - 1];
+    } else return;
+    event.preventDefault();
+    if (next) focusCell(next.index);
+  }
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      label,
+      align,
+      side,
+      className: "crewlet-emoji-picker",
+      initialFocus: () => field.current,
+      trigger: (open, toggle) => tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, disabled: open, children: trigger(open, toggle) }) : trigger(open, toggle),
+      onOpenChange: (open) => {
+        if (!open) {
+          setQuery("");
+          setAt(0);
+        }
+        onOpenChange?.(open);
+      },
+      children: (close) => /* @__PURE__ */ jsxs("div", { className: "crewlet-emoji-picker__body", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: field,
+            inputSize: "sm",
+            placeholder: labels.search,
+            "aria-label": labels.search,
+            leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+            value: query,
+            onChange: (event) => {
+              setQuery(event.target.value);
+              setAt(0);
+            },
+            onKeyDown: (event) => onFieldKeys(event, close)
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: grid,
+            className: "crewlet-emoji-picker__scroll",
+            style: { "--crewlet-emoji-picker-columns": EMOJI_PICKER_COLUMNS },
+            children: [
+              drawn.map(
+                (group, number) => group.cells.length === 0 ? null : /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${id}-group-${number}`, children: [
+                  /* @__PURE__ */ jsx("div", { id: `${id}-group-${number}`, className: "crewlet-emoji-picker__group", children: group.label }),
+                  /* @__PURE__ */ jsx("div", { className: "crewlet-emoji-picker__grid", children: group.cells.map((cell) => /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "crewlet-emoji-picker__cell",
+                      "aria-label": cell.entry.name,
+                      title: cell.entry.name,
+                      "data-emoji-index": cell.index,
+                      tabIndex: cell.index === stop ? 0 : -1,
+                      onFocus: () => setAt(cell.index),
+                      onKeyDown: (event) => onCellKeys(event, cell),
+                      onClick: () => {
+                        onPick(cell.entry.emoji);
+                        close();
+                      },
+                      children: cell.entry.emoji
+                    },
+                    cell.entry.emoji
+                  )) })
+                ] }, group.label)
+              ),
+              found && found.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-emoji-picker__none", role: "status", children: labels.none(query.trim()) }) : null
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+export { EMOJI_GROUPS, EMOJI_PICKER_COLUMNS, EMOJI_PICKER_LABELS, EmojiPicker, emojiName, searchEmoji };

package/dist/{chunk-RIAPCEB5.js → chunk-T3S3D4FC.js}

@@ -1,11 +1,11 @@
-import { Select } from './chunk-VK45YJLH.js';
+import { Select } from './chunk-3IWZVEXA.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-EE3DJMSQ.js';
-import { Popover } from './chunk-KHJIEPZV.js';
-import { Input } from './chunk-FB3TCNQP.js';
+import { Popover } from './chunk-EC6EUIAD.js';
+import { Input } from './chunk-O7N6W52M.js';
 import { Button } from './chunk-DGXZ635L.js';
-import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
+import { useFocusModality } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-YZPKNZZI.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/chunk-TDFLCUBE.js

@@ -0,0 +1,6 @@
+// src/utils/heldHint.ts
+function heldHint(hint, reason) {
+  return reason ? `${hint}. ${reason}` : hint;
+}
+
+export { heldHint };

package/dist/{chunk-OQG4P5KU.js → chunk-TGGYSQRD.js}

@@ -1,8 +1,9 @@
+import { useComposedRef } from './chunk-L72URIHR.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { useLayerContainer, viewportBounds, LAYER_GAP, anchorGone, placePopup, LAYER_REPOSITION_EVENT } from './chunk-OMV5W53A.js';
-import { usePopupLayer } from './chunk-H5XTJ7GJ.js';
+import { usePopupLayer } from './chunk-TUEM2XIW.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
-import { returnFocus } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-I4SNXHOT.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
@@ -77,6 +78,7 @@ function Menu({
     open,
     onDismiss: (reason) => close(reason !== "outside")
   });
+  const sharedRef = useComposedRef(triggerRef, popup.insideRef);
   const entries = () => menu.current ? [...menu.current.querySelectorAll(ITEM_SELECTOR)] : [];
   useLayoutEffect(() => {
     if (!open) return;
@@ -262,10 +264,7 @@ function Menu({
     }
   ) : null;
   const shared = {
-    ref: (el) => {
-      triggerRef.current = el;
-      popup.insideRef(el);
-    },
+    ref: sharedRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
     "aria-controls": open ? menuId : void 0,

package/dist/{chunk-7FF6CZW5.js → chunk-TQKQRS2J.js}

@@ -1,6 +1,6 @@
-import { Toolbar } from './chunk-NR4CPM4T.js';
-import { SegmentedControl } from './chunk-6R334YT3.js';
-import { tabId } from './chunk-2IIHMJMZ.js';
+import { Toolbar } from './chunk-NXFTCPF6.js';
+import { SegmentedControl } from './chunk-AZYE7NR4.js';
+import { tabId } from './chunk-MVKUE4FI.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-BLCJRGDC.css';
@@ -20,19 +20,26 @@ var MARKDOWN_FORMATS = [
   "checklist",
   "table"
 ];
-var WRAP = { bold: "**", italic: "_", code: "`" };
+var MARKDOWN_TEXT_FORMATS = ["strikethrough", "quote", "link"];
+var WRAP = { bold: "**", italic: "_", code: "`", strikethrough: "~~" };
 var LINE_MARKER = /^(#{1,6} |- \[[ xX]\] |[-*+] |\d+[.)] )/;
 function insertMarkdown(value, { start, end }, text) {
   const next = value.slice(0, start) + text + value.slice(end);
   const caret = start + text.length;
   return { value: next, selection: { start: caret, end: caret } };
 }
+var QUOTE_MARKER = /^> ?/;
 function formatMarkdown(value, selection, format) {
   switch (format) {
     case "bold":
     case "italic":
     case "code":
+    case "strikethrough":
       return wrap(value, selection, WRAP[format]);
+    case "quote":
+      return prefixLines(value, selection, () => "> ", () => true, QUOTE_MARKER);
+    case "link":
+      return link(value, selection);
     case "heading2":
       return prefixLines(value, selection, () => "## ", (marker) => marker === "## ");
     case "heading3":
@@ -74,18 +81,21 @@ function lineSpan(value, { start, end }) {
   const newline = value.indexOf("\n", last);
   return [from, newline === -1 ? value.length : newline];
 }
-function prefixLines(value, selection, marker, has) {
+function prefixLines(value, selection, marker, has, pattern = LINE_MARKER) {
   const [from, to] = lineSpan(value, selection);
   const lines = value.slice(from, to).split("\n");
   const single = lines.length === 1;
   const written = lines.filter((line) => single || line.trim() !== "");
-  const off = written.length > 0 && written.every((line) => has(LINE_MARKER.exec(line)?.[0] ?? ""));
+  const off = written.length > 0 && written.every((line) => {
+    const existing = pattern.exec(line)?.[0];
+    return existing !== void 0 && has(existing);
+  });
   let index = 0;
   let caretShift = 0;
   const caretLine = value.slice(from, selection.start).split("\n").length - 1;
   const next = lines.map((line, at) => {
     if (!single && line.trim() === "") return line;
-    const old = LINE_MARKER.exec(line)?.[0] ?? "";
+    const old = pattern.exec(line)?.[0] ?? "";
     const body = line.slice(old.length);
     const added = off ? "" : marker(index);
     index += 1;
@@ -100,6 +110,24 @@ function prefixLines(value, selection, marker, has) {
   }
   return { value: result, selection: { start: from, end: from + block.length } };
 }
+var LINK = /^\[([^\]\n]*)\]\(([^)\s]*)\)$/;
+var LINK_ADDRESS = "https://";
+function link(value, selection) {
+  let { start, end } = selection;
+  while (start < end && /\s/.test(value[start] ?? "")) start += 1;
+  while (end > start && /\s/.test(value[end - 1] ?? "")) end -= 1;
+  const selected = value.slice(start, end);
+  const existing = LINK.exec(selected);
+  if (existing) {
+    const label = existing[1] ?? "";
+    return { value: value.slice(0, start) + label + value.slice(end), selection: { start, end: start + label.length } };
+  }
+  const written = `[${selected}](${LINK_ADDRESS})`;
+  const result = value.slice(0, start) + written + value.slice(end);
+  if (selected === "") return { value: result, selection: { start: start + 1, end: start + 1 } };
+  const address = start + selected.length + 3;
+  return { value: result, selection: { start: address, end: address + LINK_ADDRESS.length } };
+}
 var TABLE = "| Column | Column |\n| --- | --- |\n|  |  |";
 function table(value, { start, end }) {
   const before = value.slice(0, start);
@@ -333,4 +361,4 @@ function MarkdownEditor({
   );
 }
 
-export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords };
+export { MARKDOWN_FORMATS, MARKDOWN_TEXT_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords };

package/dist/chunk-TRXTO3WC.js

@@ -0,0 +1,114 @@
+import { Tag } from './chunk-LBGKLYBY.js';
+import { isComposing } from './chunk-TUEM2XIW.js';
+import { useFocusModality } from './chunk-4ITETIGZ.js';
+import { announce } from './chunk-2G355KDJ.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tag-WLDOROB5.css';
+import './ChipField-D4CW6XFA.css';
+import { useRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CHIP_FIELD_LABELS = {
+  remove: (label) => `Remove ${label}`,
+  removed: (label) => `Removed ${label}`,
+  chosen: "Chosen"
+};
+function ChipField({
+  items,
+  onRemove,
+  query,
+  onQueryChange,
+  onCommit,
+  label,
+  prefix,
+  variant = "boxed",
+  inputRef,
+  labels: overrides,
+  className,
+  disabled = false,
+  onKeyDown,
+  ...input
+}) {
+  useFocusModality();
+  const labels = overrides ? { ...CHIP_FIELD_LABELS, ...overrides } : CHIP_FIELD_LABELS;
+  const box = useRef(null);
+  const setBox = (el) => {
+    box.current = el;
+    if (typeof inputRef === "function") inputRef(el);
+    else if (inputRef) inputRef.current = el;
+  };
+  const remove = (item) => {
+    onRemove(item.id);
+    announce(labels.removed(item.label));
+    box.current?.focus();
+  };
+  const keys = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || isComposing(event)) return;
+    if (event.key === "Backspace" && query === "") {
+      const last = items.at(-1);
+      if (!last) return;
+      event.preventDefault();
+      remove(last);
+      return;
+    }
+    if (event.key === "Enter" && onCommit && query.trim() !== "" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+      event.preventDefault();
+      onCommit();
+    }
+  };
+  const pressRow = (event) => {
+    if (disabled || event.target !== event.currentTarget) return;
+    event.preventDefault();
+    box.current?.focus();
+  };
+  return (
+    // The row is not a control: its press only forwards the caret to the
+    // box, which is the field's one keyboard stop besides the chips' Remove.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx("crewlet-chip-field", `crewlet-chip-field--${variant}`, disabled && "is-disabled", className),
+        onMouseDown: pressRow,
+        children: [
+          prefix ? /* @__PURE__ */ jsx("span", { className: "crewlet-chip-field__prefix", children: prefix }) : null,
+          items.length > 0 ? (
+            // THE ROLE IS SPELLED OUT. The list is `display: contents`, so its
+            // chips wrap in one line with the box, and a browser that drops a
+            // contents box from the accessibility tree drops its list role too.
+            // eslint-disable-next-line jsx-a11y/no-redundant-roles
+            /* @__PURE__ */ jsx("ul", { role: "list", className: "crewlet-chip-field__chips", "aria-label": labels.chosen, children: items.map((item) => /* @__PURE__ */ jsx("li", { className: "crewlet-chip-field__chip", children: /* @__PURE__ */ jsx(
+              Tag,
+              {
+                size: "sm",
+                leadingIcon: item.leading,
+                onRemove: disabled ? void 0 : () => remove(item),
+                removeAriaLabel: labels.remove(item.label),
+                children: item.label
+              }
+            ) }, item.id)) })
+          ) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              autoComplete: "off",
+              spellCheck: false,
+              ...input,
+              ref: setBox,
+              type: "text",
+              "aria-label": label,
+              className: "crewlet-chip-field__input",
+              value: query,
+              disabled,
+              onChange: (event) => onQueryChange(event.target.value),
+              onKeyDown: keys
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+
+export { CHIP_FIELD_LABELS, ChipField };

package/dist/{chunk-H5XTJ7GJ.js → chunk-TUEM2XIW.js}

@@ -1,4 +1,4 @@
-import { returnFocus } from './chunk-NUZHC6MM.js';
+import { returnFocus } from './chunk-4ITETIGZ.js';
 import { useRef, useState, useLayoutEffect, useEffect, useCallback, useSyncExternalStore } from 'react';
 import { zIndex } from '@crewlethq/tokens';
 

package/dist/{chunk-4AUTALJA.js → chunk-U2IQNDDR.js}

@@ -1,5 +1,5 @@
 import { CardHeaderSlotContext } from './chunk-AV2DXAEL.js';
-import { Count } from './chunk-MLDTLZAO.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { useHeadingLevel, HeadingLevelProvider, nextHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Card-O35OMBQ5.css';

package/dist/{chunk-IVTQWOXV.js → chunk-ULYHDP7U.js}

@@ -1,4 +1,4 @@
-import { Count } from './chunk-MLDTLZAO.js';
+import { Count } from './chunk-D2GT3CR4.js';
 import { headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-DGSK4LLS.js → chunk-V6WDJUYK.js}

@@ -1,6 +1,6 @@
 import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
 import { Callout } from './chunk-BPCY7ZID.js';
-import { Skeleton } from './chunk-BRLZXYPA.js';
+import { Skeleton } from './chunk-I4IUX3JF.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SandboxedFrame-P5NASXB7.css';

package/dist/{chunk-Z2MZTI3H.js → chunk-VB3FVKNI.js}

@@ -1,5 +1,5 @@
 import { changeText, sheetLabels } from './chunk-LFSIKGRQ.js';
-import { Tooltip } from './chunk-I33UIUZD.js';
+import { Tooltip } from './chunk-7ZSEUO5Q.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChangeMark-KFDGBF6G.css';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-R5OATXWU.js → chunk-VONEKR3J.js}

@@ -1,8 +1,8 @@
-import { useMediaMatch } from './chunk-RTPQDNW3.js';
+import { useMediaMatch, REDUCED_MOTION_QUERY } from './chunk-YJQXESOJ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChatThread-2KO3FZKQ.css';
+import './ChatThread-HAECJMP6.css';
 import { forwardRef, useRef, Children, useState, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import { ArrowDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -12,17 +12,20 @@ var CHAT_THREAD_LABELS = {
   jumpToLatest: "Jump to latest",
   newItems: (count) => count === 1 ? "1 new item" : `${count.toLocaleString()} new items`
 };
-var ChatThread = forwardRef(function ChatThread2({ label, busy = false, follow = true, children, labels: overrides, className, ...rest }, ref) {
+var ChatThread = forwardRef(function ChatThread2({ label, busy = false, follow = true, jump = true, rest: restAt = "start", children, labels: overrides, className, ...rest }, ref) {
   const labels = overrides ? { ...CHAT_THREAD_LABELS, ...overrides } : CHAT_THREAD_LABELS;
   const scroller = useRef(null);
   const items = useRef(null);
-  const reduced = useMediaMatch("(prefers-reduced-motion: reduce)");
+  const reduced = useMediaMatch(REDUCED_MOTION_QUERY);
   const count = Children.toArray(children).length;
   const atEnd = useRef(true);
   const jumping = useRef(false);
   const [detachedAt, setDetachedAt] = useState(null);
   const countRef = useRef(count);
   countRef.current = count;
+  const rowShown = useRef(false);
+  rowShown.current = jump && detachedAt !== null;
+  const revealing = useRef(null);
   const toEnd = useCallback(
     (smooth) => {
       const el = scroller.current;
@@ -80,24 +83,44 @@ var ChatThread = forwardRef(function ChatThread2({ label, busy = false, follow =
     observer.observe(el);
     return () => observer.disconnect();
   }, [follow, toEnd]);
+  const place = useCallback(
+    (element) => {
+      const el = scroller.current;
+      if (!el) return;
+      jumping.current = false;
+      const box = element.getBoundingClientRect();
+      const top = box.top - el.getBoundingClientRect().top + el.scrollTop;
+      const margins = getComputedStyle(element);
+      const above = Number.parseFloat(margins.scrollMarginTop) || 0;
+      const below = Number.parseFloat(margins.scrollMarginBottom) || 0;
+      const room = el.clientHeight - above - below;
+      const target = box.height <= room ? top - above - (room - box.height) / 2 : top - above;
+      el.scrollTop = Math.max(0, Math.min(target, el.scrollHeight - el.clientHeight));
+      onScroll();
+    },
+    [onScroll]
+  );
+  const detached = detachedAt !== null;
+  useLayoutEffect(() => {
+    const element = revealing.current;
+    revealing.current = null;
+    if (element && detached) place(element);
+  }, [detached, place]);
   useImperativeHandle(
     ref,
     () => ({
       scrollToLatest: () => toEnd(true),
       reveal: (element) => {
-        const el = scroller.current;
-        if (!el) return;
-        const top = element.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop;
-        const height = element.getBoundingClientRect().height;
-        const target = height <= el.clientHeight ? top + height - el.clientHeight : top;
-        el.scrollTop = Math.max(0, Math.min(target, top));
-        onScroll();
-      }
+        const shown = rowShown.current;
+        place(element);
+        revealing.current = jump && !shown && !atEnd.current ? element : null;
+      },
+      scroller: () => scroller.current
     }),
-    [onScroll, toEnd]
+    [jump, place, toEnd]
   );
   const fresh = detachedAt === null ? 0 : Math.max(0, count - detachedAt);
-  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-chat-thread", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...rest, className: cx("crewlet-chat-thread", restAt === "end" && "crewlet-chat-thread--rest-end", className), children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -112,7 +135,7 @@ var ChatThread = forwardRef(function ChatThread2({ label, busy = false, follow =
         children: /* @__PURE__ */ jsx("div", { ref: items, className: "crewlet-chat-thread__items", children })
       }
     ),
-    detachedAt === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-chat-thread__jump", children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "small", shape: "pill", leadingIcon: /* @__PURE__ */ jsx(ArrowDownGlyph, {}), onClick: () => toEnd(true), children: [
+    !jump || detachedAt === null ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-chat-thread__jump", children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "small", shape: "pill", leadingIcon: /* @__PURE__ */ jsx(ArrowDownGlyph, {}), onClick: () => toEnd(true), children: [
       labels.jumpToLatest,
       fresh > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("span", { className: "crewlet-chat-thread__fresh", "aria-hidden": "true", children: fresh.toLocaleString() }),

package/dist/{chunk-CZQ7UITX.js → chunk-WANKINXG.js}

@@ -1,9 +1,9 @@
-import { Modal } from './chunk-C667GCU7.js';
+import { Modal } from './chunk-ZXXZESCD.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-LMQG3VPG.js';
-import { Menu } from './chunk-OQG4P5KU.js';
+import { Checkbox } from './chunk-YQ7Q52XU.js';
+import { Menu } from './chunk-TGGYSQRD.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/{chunk-HQOEAUDJ.js → chunk-WMO722J2.js}

@@ -1,5 +1,5 @@
-import { ContrastLevelTag } from './chunk-7PJFUQMY.js';
-import { Popover } from './chunk-KHJIEPZV.js';
+import { ContrastLevelTag } from './chunk-2ZSCHQOA.js';
+import { Popover } from './chunk-EC6EUIAD.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ContrastHelp-MZCAW5WQ.css';