@crewlethq/ui 0.54.1 → 0.56.0

package/dist/chunk-GZMEWWXW.js

@@ -0,0 +1,78 @@
+import { Table } from './chunk-45KMH3E3.js';
+import { StatusCard } from './chunk-WDIVALLP.js';
+import { DownloadButton } from './chunk-HNK43Z3P.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ResultTableCard-HZRUDNTX.css';
+import { useState } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var RESULT_TABLE_CARD_LABELS = {
+  showAll: (count) => `Show all ${count.toLocaleString()}`
+};
+var RESULT_TABLE_MAX_ROWS = 20;
+var RESULT_TABLE_COLLAPSED_ROWS = 10;
+function ResultTableCard({
+  title,
+  window: span,
+  headers,
+  rows,
+  align,
+  total,
+  downloads,
+  link,
+  maxRows = RESULT_TABLE_MAX_ROWS,
+  collapsedRows = RESULT_TABLE_COLLAPSED_ROWS,
+  emptyMessage = "No rows match.",
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...RESULT_TABLE_CARD_LABELS, ...overrides } : RESULT_TABLE_CARD_LABELS;
+  const [expanded, setExpanded] = useState(false);
+  const long = rows.length > maxRows;
+  const shown = long && !expanded ? rows.slice(0, collapsedRows) : rows;
+  const hasLink = link !== void 0 && link !== null && link !== false;
+  const foot = downloads && downloads.length > 0 || hasLink ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    downloads?.map((download) => /* @__PURE__ */ jsx(
+      DownloadButton,
+      {
+        label: download.label,
+        filename: download.filename,
+        file: download.file,
+        className: "crewlet-result-table-card__download"
+      },
+      download.filename
+    )),
+    hasLink ? /* @__PURE__ */ jsx("span", { className: "crewlet-result-table-card__link", children: link }) : null
+  ] }) : void 0;
+  return /* @__PURE__ */ jsx(
+    StatusCard,
+    {
+      ...rest,
+      title,
+      subtitle: span,
+      subtitlePlacement: "below",
+      bodyPadding: "none",
+      actions: foot,
+      actionsAlign: "start",
+      className: cx("crewlet-result-table-card", className),
+      children: /* @__PURE__ */ jsx(
+        Table,
+        {
+          framed: false,
+          caption: title,
+          captionHidden: true,
+          headers,
+          data: shown,
+          align,
+          footer: total,
+          emptyMessage,
+          actionButton: long && !expanded ? { label: labels.showAll(rows.length), onClick: () => setExpanded(true) } : void 0,
+          className: "crewlet-result-table-card__table"
+        }
+      )
+    }
+  );
+}
+
+export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard };

package/dist/{chunk-OG6CL3EB.js → chunk-HD4QJ2SI.js}

@@ -1,6 +1,7 @@
+import { Spinner } from './chunk-EA23JG6R.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Button-UWKBTKYD.css';
+import './Button-VXJ7M5XF.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
 import { ExternalLinkGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -23,7 +24,7 @@ function Inner({
   children
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__spinner", "aria-hidden": true }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: leadingIcon }) : null,
+    loading ? /* @__PURE__ */ jsx(Spinner, { className: "crewlet-btn__spinner" }) : leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: leadingIcon }) : null,
     /* @__PURE__ */ jsx("span", { className: "crewlet-btn__label", children }),
     trailingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-btn__icon", children: trailingIcon }) : null
   ] });

package/dist/{chunk-SYY26XBX.js → chunk-HGCDJOEF.js}

@@ -1,7 +1,7 @@
-import { FileDrop, FilePickButton } from './chunk-THDGBD6Y.js';
+import { FileDrop, FilePickButton } from './chunk-AKFHMLEX.js';
 import { contrastRatio } from './chunk-WW7TU6HE.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './LogoSlot-NAJE5XY3.css';

package/dist/chunk-HGYHWWA5.js

@@ -0,0 +1,54 @@
+import { SidePanelBase, SidePanelFrameBase } from './chunk-XODESBSR.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './HitArea-QUOS6ZDJ.css';
+import './ResizeHandle-2UNSZ4ZQ.css';
+import './SidePanel-ERBUIELD.css';
+import './ArtifactPanel-TN4FFK2F.css';
+import { jsx } from 'react/jsx-runtime';
+
+var ARTIFACT_PANEL_LABELS = {
+  close: (title) => `Close ${title.toLowerCase()}`,
+  expand: "Expand to the full view",
+  collapse: "Back to the side"
+};
+function ArtifactPanel({
+  title,
+  icon,
+  onClose,
+  size = "md",
+  expanded = false,
+  onExpandedChange,
+  actions,
+  footer,
+  focusOnOpen = true,
+  labels,
+  className,
+  children
+}) {
+  const words = { ...ARTIFACT_PANEL_LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    SidePanelBase,
+    {
+      alias: "crewlet-artifact-panel",
+      title,
+      icon,
+      onClose,
+      closeLabel: words.close(title),
+      actions,
+      footer,
+      initialFocus: focusOnOpen ? "heading" : "none",
+      ringHeading: true,
+      expanded,
+      onExpandedChange,
+      expandLabel: words.expand,
+      collapseLabel: words.collapse,
+      className: cx(`crewlet-artifact-panel--${size}`, className),
+      children
+    }
+  );
+}
+function ArtifactWorkspace(props) {
+  return /* @__PURE__ */ jsx(SidePanelFrameBase, { ...props, alias: "crewlet-artifact-workspace" });
+}
+
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace };

package/dist/{chunk-GRKGLZFM.js → chunk-HL4CPLEK.js}

@@ -1,16 +1,16 @@
 import { PageHeader } from './chunk-DKB73KZI.js';
-import { DataTable } from './chunk-5O72FSOK.js';
-import { DateTimePicker } from './chunk-ZFM5L7M4.js';
+import { DataTable } from './chunk-JJ3NOBJ6.js';
+import { DateTimePicker } from './chunk-6NJW5KSX.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { RelativeTime } from './chunk-KS7YIJ4S.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { Input } from './chunk-LJHH4WWB.js';
+import { Input } from './chunk-FXQLNETQ.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-TMM32U7D.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { Menu } from './chunk-TKS7FTTO.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataView-N6JX464S.css';

package/dist/{chunk-BEHFTRMZ.js → chunk-HNK43Z3P.js}

@@ -1,7 +1,7 @@
-import { useDownload, safeFilename } from './chunk-IW55G7XG.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { useDownload, safeFilename } from './chunk-YNRKVY7X.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { CheckGlyph, CircleAlertGlyph, SaveGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -12,6 +12,7 @@ function downloadGlyph(state) {
 }
 function DownloadButton({
   text,
+  file,
   filename,
   mime,
   label = "Download",
@@ -27,11 +28,27 @@ function DownloadButton({
   failedResetMs = null,
   className
 }) {
-  const { state, attempt, download } = useDownload({ resetMs, failedResetMs });
+  const { state, attempt, download, downloadFile } = useDownload({ resetMs, failedResetMs });
   const name = useMemo(() => safeFilename(filename), [filename]);
+  const [fetching, setFetching] = useState(false);
+  const live = useRef(true);
+  useEffect(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
   const onClick = useCallback(() => {
+    if (file) {
+      if (fetching) return;
+      setFetching(true);
+      void downloadFile(file, filename).finally(() => {
+        if (live.current) setFetching(false);
+      });
+      return;
+    }
     void download(text, filename, mime);
-  }, [download, text, filename, mime]);
+  }, [download, downloadFile, fetching, file, text, filename, mime]);
   const said = state === "started" ? startedMessage ?? `download started: ${name}` : state === "failed" ? failedMessage : "";
   return /* @__PURE__ */ jsxs("span", { className, children: [
     /* @__PURE__ */ jsx(
@@ -41,6 +58,7 @@ function DownloadButton({
         variant,
         leadingIcon: downloadGlyph(state),
         onClick,
+        loading: fetching,
         disabled,
         title: state === "failed" ? failedMessage : title,
         children: state === "started" ? startedLabel : state === "failed" ? failedLabel : label

package/dist/{chunk-UO7JZVCO.js → chunk-HVEDVKXL.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-OG6CL3EB.js';
+import { Button } from './chunk-HD4QJ2SI.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ConflictNote-DH77PYF7.css';
 import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-ILFEWRLG.js → chunk-I7VG6RQE.js}

@@ -1,7 +1,7 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { Menu } from './chunk-TMM32U7D.js';
+import { Menu } from './chunk-TKS7FTTO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-3RCHEFIL.js → chunk-ICJRP6QW.js}

@@ -1,8 +1,8 @@
 import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PeopleRail-SZGHZXVT.css';
 import { useId } from 'react';

package/dist/{chunk-CUL5XV6O.js → chunk-IDQBSMMZ.js}

@@ -1,10 +1,10 @@
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { RelativeTime } from './chunk-KS7YIJ4S.js';
 import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactKindGround } from './chunk-RV6XB5UV.js';
 import { Card } from './chunk-INHXF2CL.js';
-import { Checkbox } from './chunk-RQI43UJ7.js';
+import { Checkbox } from './chunk-NHJQXDHA.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/chunk-JILNCBBS.js

@@ -0,0 +1,27 @@
+import { IconButton } from './chunk-2BQYODY3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import { forwardRef } from 'react';
+import { SquareGlyph, ArrowUpGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var SEND_BUTTON_LABELS = { send: "Send", stop: "Stop" };
+var SendButton = forwardRef(function SendButton2({ mode, onPress, disabledReason, labels: overrides, className, ...rest }, ref) {
+  const labels = overrides ? { ...SEND_BUTTON_LABELS, ...overrides } : SEND_BUTTON_LABELS;
+  const stopping = mode === "stop";
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      ...rest,
+      ref,
+      size: "md",
+      variant: stopping ? "secondary" : "primary",
+      label: stopping ? labels.stop : labels.send,
+      icon: stopping ? /* @__PURE__ */ jsx(SquareGlyph, { filled: true }) : /* @__PURE__ */ jsx(ArrowUpGlyph, {}),
+      disabledReason: stopping ? void 0 : disabledReason,
+      className: cx("crewlet-send-button", `crewlet-send-button--${mode}`, className),
+      onClick: onPress
+    }
+  );
+});
+
+export { SEND_BUTTON_LABELS, SendButton };

package/dist/{chunk-5O72FSOK.js → chunk-JJ3NOBJ6.js}

@@ -1,11 +1,11 @@
-import { Modal } from './chunk-YCC2S7DF.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
+import { Modal } from './chunk-QZ4B72FP.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-RQI43UJ7.js';
-import { Menu } from './chunk-TMM32U7D.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { Checkbox } from './chunk-NHJQXDHA.js';
+import { Menu } from './chunk-TKS7FTTO.js';
+import { Button } from './chunk-HD4QJ2SI.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DataTable-NL2YWAIA.css';

package/dist/chunk-JLRXCKTS.js

@@ -0,0 +1,97 @@
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Textarea } from './chunk-FXQLNETQ.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Composer-JSGTOW3F.css';
+import { forwardRef, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var COMPOSER_COUNTER_AT = 0.8;
+var Composer = forwardRef(function Composer2({
+  value,
+  onChange,
+  onSubmit,
+  submitOn = "mod-enter",
+  label,
+  actions,
+  trailing,
+  attachments,
+  attachmentsLabel = "Attached to this message",
+  disabledReason,
+  disabled: disabledProp,
+  placeholder,
+  maxLength,
+  className,
+  rows,
+  onKeyDown,
+  "aria-describedby": describedBy,
+  ...rest
+}, ref) {
+  const reasonId = useId();
+  const disabled = Boolean(disabledProp) || disabledReason !== void 0;
+  const inline = present(trailing);
+  const near = maxLength !== void 0 && value.length >= maxLength * COMPOSER_COUNTER_AT;
+  const hasActions = present(actions);
+  const hint = onSubmit !== void 0 && submitOn === "mod-enter";
+  const keyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !onSubmit || disabled || event.key !== "Enter") return;
+    if (isComposing(event)) return;
+    const mod = event.metaKey || event.ctrlKey;
+    const sends = submitOn === "enter" ? !event.shiftKey || mod : mod;
+    if (!sends) return;
+    event.preventDefault();
+    onSubmit();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-composer",
+        inline && "crewlet-composer--inline",
+        disabled && "is-disabled",
+        className
+      ),
+      children: [
+        present(attachments) ? /* @__PURE__ */ jsx("div", { role: "group", "aria-label": attachmentsLabel, className: "crewlet-composer__attachments", children: attachments }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__row", children: [
+          /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref,
+              className: "crewlet-composer__field",
+              "aria-label": label,
+              "aria-describedby": disabledReason === void 0 ? describedBy : cx(describedBy, reasonId),
+              value,
+              onChange: (event) => onChange(event.target.value),
+              onKeyDown: keyDown,
+              maxLength,
+              rows: rows ?? (inline ? 1 : 3),
+              disabled,
+              placeholder: disabledReason ?? placeholder,
+              autoResize: true,
+              ...rest
+            }
+          ),
+          inline ? /* @__PURE__ */ jsx("div", { className: "crewlet-composer__trailing", children: trailing }) : null
+        ] }),
+        disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: reasonId, children: disabledReason }),
+        hint || near || hasActions ? /* @__PURE__ */ jsxs("div", { className: "crewlet-composer__footer", "data-hint-only": !near && !hasActions || void 0, children: [
+          hint ? /* @__PURE__ */ jsxs("span", { className: "crewlet-composer__hint", children: [
+            /* @__PURE__ */ jsx(Kbd, { keys: ["Mod", "Enter"], subtle: true }),
+            " to send"
+          ] }) : null,
+          near ? /* @__PURE__ */ jsx("span", { className: "crewlet-composer__counter", "aria-live": "polite", children: `${value.length.toLocaleString()} / ${maxLength.toLocaleString()}` }) : null,
+          /* @__PURE__ */ jsx("span", { className: "crewlet-composer__spacer" }),
+          actions
+        ] }) : null
+      ]
+    }
+  );
+});
+function present(node) {
+  return node !== void 0 && node !== null && node !== false;
+}
+
+export { COMPOSER_COUNTER_AT, Composer };

package/dist/{chunk-OJCVVCAZ.js → chunk-JMMS2PQU.js}

@@ -1,4 +1,4 @@
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PinTile-IIA25MNZ.css';
 import { forwardRef } from 'react';

package/dist/{chunk-SXBJMBSV.js → chunk-JS2TRHBF.js}

@@ -1,8 +1,8 @@
-import { Tag } from './chunk-KYIAFNU7.js';
 import { useListbox } from './chunk-7KHM2FZH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-CLFHP6I2.css';

package/dist/{chunk-3CZ7XAVY.js → chunk-KS7YIJ4S.js}

@@ -35,15 +35,19 @@ function subscribe(listener) {
     if (listeners.size === 0) stop();
   };
 }
+var TICK = 1e3;
+function read() {
+  if (!timer) {
+    const current = Date.now();
+    if (Math.abs(current - now) >= TICK) now = current;
+  }
+  return now;
+}
 function useNow() {
-  return useSyncExternalStore(
-    subscribe,
-    () => now,
-    () => now
-  );
+  return useSyncExternalStore(subscribe, read, read);
 }
 function currentNow() {
-  return now;
+  return read();
 }
 
 // src/RelativeTime/format.ts

package/dist/{chunk-VWNC2L6W.js → chunk-KW6KCVM7.js}

@@ -46,7 +46,7 @@ function Breadcrumb({ crumbs, current, label = "Breadcrumb", className, style, .
               }
             ) : crumb.href ? /* @__PURE__ */ jsx("a", { className: cx("crewlet-breadcrumb__crumb", face), href: crumb.href, children: words }) : (
               // AN ANCESTOR WITH NO PAGE OF ITS OWN, or one the reader is
-              // already on ("Work" on Work's landing): its words in the
+              // already on ("Worklet" on Worklet's landing): its words in the
               // ancestors' quiet ink, with nothing to press.
               /* @__PURE__ */ jsx("span", { className: cx("crewlet-breadcrumb__crumb", face), children: words })
             )

package/dist/{chunk-X4NIE7CI.js → chunk-LQ6AGUDL.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { ShortcutTip } from './chunk-D7Q5MQRF.js';
-import { IconButton } from './chunk-LACA4JGC.js';
+import { ShortcutTip } from './chunk-YEURM24I.js';
+import { IconButton } from './chunk-2BQYODY3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';
 import { jsx } from 'react/jsx-runtime';