@crewlethq/ui 0.18.0 → 0.20.0

package/dist/chunk-DEJHAOC5.js

@@ -0,0 +1,279 @@
+import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeFrame-3PLZAG22.css';
+import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';
+import { TrashGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function gridOf(node) {
+  const grid = node.parentElement;
+  const own = node.getBoundingClientRect();
+  if (!grid) return { columns: 12, step: own.width, gap: 0, left: 0, width: own.width };
+  const style = getComputedStyle(grid);
+  const tracks = style.gridTemplateColumns.split(" ").map(parseFloat).filter((n) => !Number.isNaN(n));
+  const gap = parseFloat(style.columnGap) || 0;
+  const track = tracks[0] ?? grid.clientWidth / 12;
+  const box = grid.getBoundingClientRect();
+  const padLeft = parseFloat(style.paddingLeft) || 0;
+  const padRight = parseFloat(style.paddingRight) || 0;
+  return {
+    columns: tracks.length || 12,
+    step: track + gap,
+    gap,
+    left: box.left + padLeft - own.left,
+    width: box.width - padLeft - padRight
+  };
+}
+function useGridResize(frame, { name, size, rowHeight, minColumns = 1, maxColumns, minRows = 2, maxRows = 60, vertical = true, onResize }) {
+  const [live, setLive] = useState(null);
+  const [guides, setGuides] = useState(null);
+  const drag = useRef(null);
+  const say = useCallback(
+    (next, columns) => {
+      const height = next.rows === null ? "its height fits its content" : `${next.rows * rowHeight} pixels tall`;
+      announce(`${name}: ${next.columns} of ${columns} columns wide, ${height}.`);
+    },
+    [name, rowHeight]
+  );
+  const cancel = useCallback(() => {
+    drag.current = null;
+    setLive(null);
+    setGuides(null);
+  }, []);
+  useEffect(() => {
+    if (!live) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") cancel();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [live, cancel]);
+  const sizeAt = (d, x, y) => {
+    const hi = Math.min(maxColumns ?? d.columns, d.columns);
+    const columns = clamp(Math.round((d.width + (x - d.x) + d.gap) / d.step), Math.min(minColumns, hi), hi);
+    const dy = y - d.y;
+    const rows = !vertical ? size.rows : size.rows === null && Math.abs(dy) < rowHeight / 2 ? null : clamp(Math.round((d.height + dy) / rowHeight), minRows, maxRows);
+    return { columns, rows };
+  };
+  const handleProps = {
+    "aria-label": `Resize ${name}`,
+    "aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Enter",
+    onPointerDown: (event) => {
+      if (event.button !== 0 || !frame.current) return;
+      event.preventDefault();
+      event.stopPropagation();
+      try {
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+      } catch {
+      }
+      const rect = frame.current.getBoundingClientRect();
+      const grid = gridOf(frame.current);
+      drag.current = {
+        pointer: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        width: rect.width,
+        height: rect.height,
+        step: grid.step,
+        gap: grid.gap,
+        columns: grid.columns
+      };
+      setGuides({ left: grid.left, width: grid.width, columns: grid.columns, gap: grid.gap });
+      setLive(size);
+    },
+    onPointerMove: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      setLive((was) => was && was.columns === next.columns && was.rows === next.rows ? was : next);
+    },
+    onPointerUp: (event) => {
+      const d = drag.current;
+      if (!d || d.pointer !== event.pointerId) return;
+      const next = sizeAt(d, event.clientX, event.clientY);
+      drag.current = null;
+      setLive(null);
+      setGuides(null);
+      if (next.columns !== size.columns || next.rows !== size.rows) {
+        onResize(next);
+        say(next, d.columns);
+      }
+    },
+    onPointerCancel: cancel,
+    onKeyDown: (event) => {
+      if (!frame.current || event.altKey || event.ctrlKey || event.metaKey) return;
+      const grid = gridOf(frame.current);
+      const hi = Math.min(maxColumns ?? grid.columns, grid.columns);
+      const rowsNow = size.rows ?? Math.round(frame.current.getBoundingClientRect().height / rowHeight);
+      let next = null;
+      if (event.key === "ArrowLeft") next = { ...size, columns: clamp(size.columns - 1, Math.min(minColumns, hi), hi) };
+      if (event.key === "ArrowRight") next = { ...size, columns: clamp(size.columns + 1, Math.min(minColumns, hi), hi) };
+      if (vertical && event.key === "ArrowUp") next = { ...size, rows: clamp(rowsNow - 1, minRows, maxRows) };
+      if (vertical && event.key === "ArrowDown") next = { ...size, rows: clamp(rowsNow + 1, minRows, maxRows) };
+      if (vertical && event.key === "Enter") next = { ...size, rows: null };
+      if (!next) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (next.columns === size.columns && next.rows === size.rows) return;
+      onResize(next);
+      say(next, grid.columns);
+    },
+    onDoubleClick: () => {
+      if (!vertical || size.rows === null) return;
+      const next = { ...size, rows: null };
+      onResize(next);
+      say(next, frame.current ? gridOf(frame.current).columns : 12);
+    }
+  };
+  return { live, guides, handleProps };
+}
+var FIELDS = 'input, textarea, select, [contenteditable="true"]';
+function assign(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var ArrangeFrame = forwardRef(function ArrangeFrame2({
+  name,
+  editing,
+  columns,
+  rows = null,
+  rowHeight = 24,
+  handle,
+  resize,
+  actions,
+  onRemove,
+  fixed,
+  container = false,
+  bare = false,
+  selected = false,
+  fresh,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const node = useRef(null);
+  const setNode = useCallback(
+    (el) => {
+      node.current = el;
+      assign(ref, el);
+    },
+    [ref]
+  );
+  const vertical = resize?.vertical !== false;
+  const { live, guides, handleProps: resizeProps } = useGridResize(node, {
+    name,
+    size: { columns, rows },
+    rowHeight,
+    minColumns: resize?.minColumns,
+    maxColumns: resize?.maxColumns,
+    minRows: resize?.minRows,
+    maxRows: resize?.maxRows,
+    vertical,
+    onResize: (next) => resize?.onResize(next)
+  });
+  const shown = live ?? { columns, rows };
+  const placed = {
+    ...style,
+    gridColumn: `span ${shown.columns}`,
+    ...shown.rows !== null ? { height: `${shown.rows * rowHeight}px` } : {}
+  };
+  const onField = useRef(false);
+  const surface = editing && handle ? {
+    draggable: true,
+    tabIndex: 0,
+    role: "group",
+    "aria-label": name,
+    "aria-describedby": handle["aria-describedby"],
+    onPointerDownCapture: (event) => {
+      onField.current = event.target.closest(FIELDS) !== null;
+    },
+    onDragStart: (event) => {
+      if (onField.current) event.preventDefault();
+      else handle.onDragStart(event);
+    },
+    onDragEnd: handle.onDragEnd,
+    // The block's own keys only: arrows typed in a group's name move the caret.
+    onKeyDown: (event) => {
+      if (event.target === event.currentTarget) handle.onKeyDown(event);
+    }
+  } : {};
+  const resizeName = vertical ? `Resize ${name}` : `Change the width of ${name}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNode,
+      className: cx(
+        "crewlet-arrange-frame",
+        editing && "is-editing",
+        container && "is-container",
+        bare && "is-bare",
+        editing && selected && "is-selected",
+        live && "is-resizing",
+        shown.rows !== null && "is-fixed-height",
+        fresh && "is-fresh",
+        className
+      ),
+      style: placed,
+      "data-columns": shown.columns,
+      ...surface,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "crewlet-arrange-frame__content", inert: editing && !container || void 0, children }),
+        editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-arrange-frame__bar", role: "group", "aria-label": `Tools for ${name}`, children: [
+            actions,
+            onRemove || fixed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__sep", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  variant: "ghost-danger",
+                  label: `Remove ${name}`,
+                  icon: /* @__PURE__ */ jsx(TrashGlyph, { size: "sm" }),
+                  ...fixed ? { disabledReason: fixed } : {},
+                  onClick: () => onRemove?.()
+                }
+              )
+            ] }) : null
+          ] }),
+          resize ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx("crewlet-arrange-frame__resize", vertical ? "is-corner" : "is-edge"),
+              title: vertical ? `${resizeName}. Double click to fit the height to its content.` : resizeName,
+              draggable: false,
+              ...resizeProps,
+              "aria-label": resizeName,
+              children: /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-frame__grip", "aria-hidden": "true" })
+            }
+          ) : null,
+          guides ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "crewlet-arrange-frame__guides",
+              "aria-hidden": "true",
+              style: {
+                left: `${guides.left}px`,
+                width: `${guides.width}px`,
+                gridTemplateColumns: `repeat(${guides.columns}, minmax(0, 1fr))`,
+                columnGap: `${guides.gap}px`
+              },
+              children: Array.from({ length: guides.columns }, (_, i) => /* @__PURE__ */ jsx("span", {}, i))
+            }
+          ) : null,
+          live ? /* @__PURE__ */ jsxs("span", { className: "crewlet-arrange-frame__size", "aria-hidden": "true", children: [
+            `${live.columns} ${live.columns === 1 ? "column" : "columns"}`,
+            vertical ? ` \xB7 ${live.rows === null ? "Height fits content" : `${live.rows * rowHeight} px tall`}` : ""
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+});
+
+export { ArrangeFrame, useGridResize };

package/dist/{chunk-ERV5BUS3.js → chunk-EIGEIT4O.js}

@@ -1,10 +1,10 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Input } from './chunk-4GB57WIT.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
+import { Input } from './chunk-Q55TXPA3.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-BZ5HHATU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';

package/dist/chunk-EZBLOUWX.js

@@ -0,0 +1,176 @@
+import { Document } from './chunk-WI6K5M5X.js';
+import { Composer } from './chunk-VJLYGPPE.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { Count } from './chunk-BHHIIK3M.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CommentThread-7VXOFTZO.css';
+import { useState, useRef, useId, useMemo } from 'react';
+import { MessageSquareGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var COMMENT_THREAD_LABELS = {
+  heading: "Comments",
+  empty: "Nobody has commented.",
+  system: "System",
+  edited: "(edited)",
+  inReplyTo: (name) => `in reply to ${name}`,
+  replyTo: (name) => `Reply to ${name}`,
+  reply: "Reply",
+  replying: (name) => `Replying to ${name}`,
+  stopReplying: "Stop replying",
+  field: (subject, replyingTo) => replyingTo !== void 0 ? `Reply to ${replyingTo}` : subject !== void 0 ? `Comment on \u201C${subject}\u201D` : "Write a comment",
+  placeholder: "Write a comment",
+  submit: "Comment",
+  submitReply: "Reply",
+  emptyDraft: "Write the comment first."
+};
+function CommentThread({
+  comments,
+  subject,
+  onSubmit,
+  disabledReason,
+  busy = false,
+  hint,
+  notice,
+  heading = true,
+  now,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...COMMENT_THREAD_LABELS, ...overrides } : COMMENT_THREAD_LABELS;
+  const [draft, setDraft] = useState("");
+  const [replyTo, setReplyTo] = useState(null);
+  const [sending, setSending] = useState(false);
+  const field = useRef(null);
+  const headingID = useId();
+  const level = useHeadingLevel();
+  const Heading = headingTag(level);
+  const byID = useMemo(() => new Map(comments.map((comment) => [comment.id, comment])), [comments]);
+  const nameOf = (comment) => comment.author?.name ?? labels.system;
+  const body = draft.trim();
+  const pending = busy || sending;
+  const reason = disabledReason ?? (body === "" ? labels.emptyDraft : void 0);
+  const blocked = pending || reason !== void 0;
+  const send = async () => {
+    if (!onSubmit || blocked) return;
+    setSending(true);
+    try {
+      const result = await onSubmit(body, replyTo);
+      if (result !== false) {
+        setDraft("");
+        setReplyTo(null);
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+  const startReply = (comment) => {
+    setReplyTo(comment);
+    field.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("crewlet-comment-thread", className),
+      "aria-labelledby": heading ? headingID : void 0,
+      "aria-label": heading ? void 0 : labels.heading,
+      children: [
+        heading && /* @__PURE__ */ jsxs(Heading, { className: "crewlet-comment-thread__heading", id: headingID, children: [
+          /* @__PURE__ */ jsx(MessageSquareGlyph, { size: "sm" }),
+          labels.heading,
+          /* @__PURE__ */ jsx(Count, { value: comments.length })
+        ] }),
+        comments.length === 0 ? /* @__PURE__ */ jsx("p", { className: "crewlet-comment-thread__empty", children: labels.empty }) : (
+          // The markers are off, and WebKit drops the list role with them, so
+          // the role is declared and the redundant-role rule silenced for that.
+          // eslint-disable-next-line jsx-a11y/no-redundant-roles
+          /* @__PURE__ */ jsx("ol", { role: "list", className: "crewlet-comment-thread__list", children: comments.map((comment) => {
+            const parent = comment.replyTo !== void 0 ? byID.get(comment.replyTo) : void 0;
+            const created = toInstant(comment.createdAt);
+            const edited = toInstant(comment.editedAt);
+            const name = nameOf(comment);
+            return /* @__PURE__ */ jsxs("li", { className: "crewlet-comment-thread__comment", children: [
+              /* @__PURE__ */ jsxs("div", { className: "crewlet-comment-thread__head", children: [
+                comment.author ? /* @__PURE__ */ jsxs("span", { className: "crewlet-comment-thread__author", children: [
+                  /* @__PURE__ */ jsx(PrincipalAvatar, { principal: comment.author, size: "xs" }),
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-comment-thread__name", children: comment.author.name })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "crewlet-comment-thread__name", children: labels.system }),
+                /* @__PURE__ */ jsx(RelativeTime, { value: comment.createdAt, now, className: "crewlet-comment-thread__meta" }),
+                edited !== null && edited !== created && /* @__PURE__ */ jsx(
+                  "time",
+                  {
+                    className: "crewlet-comment-thread__meta",
+                    dateTime: toISO(comment.editedAt) ?? void 0,
+                    title: formatExact(comment.editedAt) ?? void 0,
+                    children: labels.edited
+                  }
+                ),
+                parent && /* @__PURE__ */ jsx("span", { className: "crewlet-comment-thread__meta", children: labels.inReplyTo(nameOf(parent)) }),
+                onSubmit && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "small",
+                    variant: "ghost",
+                    className: "crewlet-comment-thread__reply",
+                    "aria-label": labels.replyTo(name),
+                    onClick: () => startReply(comment),
+                    children: labels.reply
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(Document, { size: "sm", measure: "none", children: comment.body })
+            ] }, comment.id);
+          }) })
+        ),
+        onSubmit && /* @__PURE__ */ jsxs("div", { className: "crewlet-comment-thread__compose", children: [
+          replyTo && /* @__PURE__ */ jsxs("span", { className: "crewlet-comment-thread__replying", children: [
+            labels.replying(nameOf(replyTo)),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                variant: "ghost",
+                label: labels.stopReplying,
+                icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }),
+                onClick: () => {
+                  setReplyTo(null);
+                  field.current?.focus();
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Composer,
+            {
+              ref: field,
+              value: draft,
+              onChange: setDraft,
+              onSubmit: () => void send(),
+              label: labels.field(subject, replyTo ? nameOf(replyTo) : void 0),
+              placeholder: labels.placeholder,
+              actions: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "secondary",
+                  loading: pending,
+                  disabledReason: pending ? void 0 : reason,
+                  onClick: () => void send(),
+                  children: replyTo ? labels.submitReply : labels.submit
+                }
+              )
+            }
+          ),
+          (disabledReason ?? hint) !== void 0 && /* @__PURE__ */ jsx("p", { className: "crewlet-comment-thread__hint", children: disabledReason ?? hint }),
+          notice
+        ] })
+      ]
+    }
+  );
+}
+
+export { COMMENT_THREAD_LABELS, CommentThread };

package/dist/chunk-FFMCMSJB.js

@@ -0,0 +1 @@
+import './HuePicker-PAIGH6LR.css';

package/dist/{chunk-LFZ45HV2.js → chunk-G3EEUNZQ.js}

@@ -1,5 +1,5 @@
 import { EmptyState } from './chunk-RA2ULG6H.js';
-import { Card } from './chunk-EG6NYWVK.js';
+import { Card } from './chunk-YZCJ63JF.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AccessDeniedCard-WXM5DBDZ.css';
 import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-2YR5ZPQ3.js → chunk-HTCJSUIZ.js}

@@ -1,12 +1,12 @@
 import { Select } from './chunk-FC4YTTFJ.js';
-import { Modal } from './chunk-2TZATTIU.js';
 import { CopyButton } from './chunk-W46LPU4R.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { Callout } from './chunk-SVSCLHHI.js';
 import { Button } from './chunk-OG6CL3EB.js';
-import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ShareDialog-YZ4F37MW.css';
 import { useState, useId } from 'react';

package/dist/{chunk-75CLJNDQ.js → chunk-I6NZKJGK.js}

@@ -1,4 +1,4 @@
-import { FormField } from './chunk-4GB57WIT.js';
+import { FormField } from './chunk-Q55TXPA3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Checkbox-KT7RS6QQ.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';

package/dist/chunk-IXJHTFXG.js

@@ -0,0 +1,17 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './IconTile-4GNWTLAW.css';
+import { jsx } from 'react/jsx-runtime';
+
+function IconTile({ children, hue, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      ...rest,
+      className: cx("crewlet-icon-tile", `crewlet-icon-tile--${size}`, hue && `crewlet-icon-tile--${hue}`, className),
+      children
+    }
+  );
+}
+
+export { IconTile };

package/dist/{chunk-3UAA4IWJ.js → chunk-JEDWC3GI.js}

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

package/dist/{chunk-QVAFL2LE.js → chunk-JXRI5YD2.js}

@@ -1,13 +1,13 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './StatGroup-HVG6O62W.css';
+import './StatGroup-PADTJCUQ.css';
 import { jsx } from 'react/jsx-runtime';
 
-function StatGroup({ columns = 4, className, children, ...rest }) {
+function StatGroup({ columns = 4, flush = false, className, children, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...rest,
-      className: cx("crewlet-stat-group", className),
+      className: cx("crewlet-stat-group", flush && "crewlet-stat-group--flush", className),
       style: { "--crewlet-stat-group-cols": columns, ...rest.style },
       children
     }

package/dist/{chunk-ZFH7H7GS.js → chunk-LOLELDBW.js}

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

package/dist/chunk-MUGM7SEG.js

@@ -0,0 +1,88 @@
+import { Tag } from './chunk-GFV4LJHH.js';
+import { Link } from './chunk-FBSEJO2C.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { EmptyValue } from './chunk-EUCC37WY.js';
+import { Avatar } from './chunk-5OM447RW.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TableCells-3VN5N2M3.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function TableKeyCell({ value, text, href, emptyLabel = "Not set" }) {
+  if (!value) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx(Link, { href, size: "inherit", className: "crewlet-table-cell__key", title: value, children: text ?? value });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__key", title: value, children: text ?? value });
+}
+var groupFigure = (value) => value.toLocaleString();
+function TableNumberCell({
+  value,
+  format = groupFigure,
+  suffix,
+  title,
+  emptyLabel = "Nothing recorded"
+}) {
+  if (value === null || value === void 0 || !Number.isFinite(value)) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__number", title, children: [
+    format(value),
+    suffix
+  ] });
+}
+function TableDateCell({ value, now, emptyLabel = "Never" }) {
+  if (value === null || value === void 0 || value === "") return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  return /* @__PURE__ */ jsx(RelativeTime, { value, now, emptyLabel, className: "crewlet-table-cell__date" });
+}
+function TableEntityCell({
+  name,
+  kind = "agent",
+  badge,
+  href,
+  title,
+  size = "xs",
+  emptyLabel = "Nobody"
+}) {
+  if (!name) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__badge", "aria-hidden": "true", children: badge ?? /* @__PURE__ */ jsx(Avatar, { name, size, kind, decorative: true }) }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children: name })
+  ] });
+  if (href !== void 0) {
+    return /* @__PURE__ */ jsx(Link, { href, variant: "subtle", size: "inherit", className: "crewlet-table-cell__entity", title: title ?? name, children: inner });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__entity", title: title ?? name, children: inner });
+}
+function TableStatusCell({ label, glyph, tone = "neutral", title }) {
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-table-cell__status", `crewlet-table-cell__status--${tone}`), title: title ?? label, children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__glyph", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children: label })
+  ] });
+}
+var TABLE_TAGS_CELL_LABELS = {
+  more: (count) => count === 1 ? "1 more tag" : `${count.toLocaleString()} more tags`
+};
+function TableTagsCell({ tags, max = 3, emptyLabel = "No tags", labels: overrides }) {
+  const list = tags ?? [];
+  if (list.length === 0) return /* @__PURE__ */ jsx(EmptyValue, { label: emptyLabel });
+  const labels = overrides ? { ...TABLE_TAGS_CELL_LABELS, ...overrides } : TABLE_TAGS_CELL_LABELS;
+  const shown = list.slice(0, max);
+  const rest = list.length - shown.length;
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__tags", children: [
+    shown.map((tag) => /* @__PURE__ */ jsx(Tag, { appearance: "outline", size: "xs", children: tag }, tag)),
+    rest > 0 && /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__more", title: list.slice(max).join(", "), children: [
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+        "+",
+        rest
+      ] }),
+      /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.more(rest) })
+    ] })
+  ] });
+}
+function TableTextCell({ children, icon, mark }) {
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__text", children: [
+    mark ?? (icon !== void 0 && icon !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__icon", "aria-hidden": "true", children: icon }) : null),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children })
+  ] });
+}
+
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell };