@crewlethq/ui 0.19.0 → 0.21.0

package/dist/chunk-BVWSLXTY.js

@@ -0,0 +1,187 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DiffView-RVLIHTKG.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DIFF_VIEW_LABELS = {
+  skipped: (count) => count === 1 ? "1 unchanged line" : `${count.toLocaleString()} unchanged lines`,
+  added: "Added",
+  removed: "Removed",
+  region: "Line changes"
+};
+function DiffView({ sections, labels: overrides, className, "aria-label": ariaLabel, ...rest }) {
+  const labels = overrides ? { ...DIFF_VIEW_LABELS, ...overrides } : DIFF_VIEW_LABELS;
+  return /* @__PURE__ */ jsx("div", { ...rest, role: "group", "aria-label": ariaLabel ?? labels.region, className: cx("crewlet-diff-view", className), children: sections.map((section, s) => (
+    // A section has no identity of its own: a diff is computed whole, so
+    // its position is what tells two sections apart.
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-diff-view__section", children: [
+      section.skipped > 0 && /* @__PURE__ */ jsx("div", { className: "crewlet-diff-view__skip", children: labels.skipped(section.skipped) }),
+      section.lines.map((line, i) => (
+        // THE CLASS NAMES ARE LITERALS, never assembled from the value: a
+        // stylesheet gate that cannot see a class cannot tell a rule this
+        // file relies on from one nothing uses.
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(
+              "crewlet-diff-view__line",
+              line.kind === "add" && "crewlet-diff-view__line--add",
+              line.kind === "remove" && "crewlet-diff-view__line--remove"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__number", "aria-hidden": "true", children: line.before ?? "" }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__number", "aria-hidden": "true", children: line.after ?? "" }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-diff-view__mark", children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: line.kind === "add" ? "+" : line.kind === "remove" ? "\u2212" : " " }),
+                line.kind === "add" && /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.added }),
+                line.kind === "remove" && /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.removed })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-diff-view__text", children: line.text || " " })
+            ]
+          },
+          i
+        )
+      ))
+    ] }, s)
+  )) });
+}
+var DIFF_SUMMARY_LABELS = {
+  spoken: (added, removed) => `${added === 1 ? "1 line" : `${added.toLocaleString()} lines`} added, ${removed.toLocaleString()} removed`,
+  against: (what) => `against ${what}`
+};
+function DiffSummary({ added, removed, against, labels: overrides, className, ...rest }) {
+  const labels = overrides ? { ...DIFF_SUMMARY_LABELS, ...overrides } : DIFF_SUMMARY_LABELS;
+  return /* @__PURE__ */ jsxs("p", { ...rest, className: cx("crewlet-diff-summary", className), children: [
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-diff-summary__added", children: [
+        "+",
+        added.toLocaleString()
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-diff-summary__removed", children: `\u2212${removed.toLocaleString()}` })
+    ] }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: labels.spoken(added, removed) }),
+    against !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      labels.against(against)
+    ] })
+  ] });
+}
+
+// src/DiffView/diff.ts
+var MAX_DIFF_LINES = 2e3;
+function splitLines(text) {
+  const normalised = (text ?? "").replace(/\r\n?/g, "\n");
+  if (normalised === "") return [];
+  return normalised.replace(/\n$/, "").split("\n");
+}
+function diffLines(before, after) {
+  const a = splitLines(before);
+  const b = splitLines(after);
+  if (a.length > MAX_DIFF_LINES || b.length > MAX_DIFF_LINES) {
+    return [
+      ...a.map((text, i) => ({ kind: "remove", text, before: i + 1, after: null })),
+      ...b.map((text, i) => ({ kind: "add", text, before: null, after: i + 1 }))
+    ];
+  }
+  return walk(a, b, common(a, b));
+}
+function diffStat(diff) {
+  let added = 0;
+  let removed = 0;
+  for (const line of diff) {
+    if (line.kind === "add") added++;
+    if (line.kind === "remove") removed++;
+  }
+  return { added, removed, identical: added === 0 && removed === 0 };
+}
+function collapseDiff(diff, context = 3) {
+  const keep = new Array(diff.length).fill(false);
+  diff.forEach((line, i) => {
+    if (line.kind === "same") return;
+    for (let k = Math.max(0, i - context); k <= Math.min(diff.length - 1, i + context); k++) {
+      keep[k] = true;
+    }
+  });
+  const out = [];
+  let skipped = 0;
+  let current = null;
+  diff.forEach((line, i) => {
+    if (keep[i]) {
+      if (!current) {
+        current = [];
+        out.push({ lines: current, skipped });
+        skipped = 0;
+      }
+      current.push(line);
+      return;
+    }
+    skipped++;
+    current = null;
+  });
+  return out;
+}
+function firstChangedLines(sections, max) {
+  const out = [];
+  let shown = 0;
+  let more = 0;
+  for (const section of sections) {
+    const kept = [];
+    for (const line of section.lines) {
+      const changed = line.kind !== "same";
+      if (shown >= max) {
+        if (changed) more++;
+        continue;
+      }
+      if (changed) shown++;
+      kept.push(line);
+    }
+    if (kept.length > 0) out.push({ lines: kept, skipped: section.skipped });
+  }
+  return { sections: out, more };
+}
+function common(a, b) {
+  const table = [];
+  for (let i = 0; i <= a.length; i++) table.push(new Uint32Array(b.length + 1));
+  for (let i = a.length - 1; i >= 0; i--) {
+    const row = table[i];
+    const next = table[i + 1];
+    for (let j = b.length - 1; j >= 0; j--) {
+      row[j] = a[i] === b[j] ? next[j + 1] + 1 : Math.max(next[j], row[j + 1]);
+    }
+  }
+  return table;
+}
+function walk(a, b, table) {
+  const out = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    if (a[i] === b[j]) {
+      out.push({ kind: "same", text: a[i], before: i + 1, after: j + 1 });
+      i++;
+      j++;
+      continue;
+    }
+    const down = table[i + 1][j];
+    const right = table[i][j + 1];
+    if (down >= right) {
+      out.push({ kind: "remove", text: a[i], before: i + 1, after: null });
+      i++;
+    } else {
+      out.push({ kind: "add", text: b[j], before: null, after: j + 1 });
+      j++;
+    }
+  }
+  while (i < a.length) {
+    out.push({ kind: "remove", text: a[i], before: i + 1, after: null });
+    i++;
+  }
+  while (j < b.length) {
+    out.push({ kind: "add", text: b[j], before: null, after: j + 1 });
+    j++;
+  }
+  return out;
+}
+
+export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines };

package/dist/{chunk-EDGCPVVD.js → chunk-G5TAKMEA.js}

@@ -1,12 +1,13 @@
 import { useMediaMatch } from './chunk-IG75YMUN.js';
+import { Menu } from './chunk-4MIM356A.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-RUNVM4WH.css';
+import './AppShell-APHZKJYH.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
-import { ChevronUpGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function AccountRow({
@@ -14,6 +15,7 @@ function AccountRow({
   name,
   detail,
   href,
+  menu,
   current = false,
   title,
   linkSuffix = ", your account",
@@ -32,7 +34,29 @@ function AccountRow({
     ] })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-account-row", className), children: [
-    href === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__who", children: who }) : /* @__PURE__ */ jsxs(
+    menu ? /* @__PURE__ */ jsx(
+      Menu,
+      {
+        label: menu.label ?? "Your account",
+        items: menu.items,
+        header: menu.header,
+        renderTrigger: (trigger) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-account-row__who",
+            title,
+            "data-current": current ? "" : void 0,
+            ...trigger,
+            children: [
+              who,
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: linkSuffix }),
+              /* @__PURE__ */ jsx(ChevronsUpDownGlyph, { size: "xs", className: "crewlet-account-row__go", "aria-hidden": "true" })
+            ]
+          }
+        )
+      }
+    ) : href === void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-account-row__who", children: who }) : /* @__PURE__ */ jsxs(
       "a",
       {
         className: "crewlet-account-row__who",

package/dist/chunk-IC64IWOO.js

@@ -0,0 +1,176 @@
+import { Document } from './chunk-WI6K5M5X.js';
+import { Composer } from './chunk-VJLYGPPE.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 { Button } from './chunk-OG6CL3EB.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-J4OKGJQ6.js

@@ -0,0 +1,96 @@
+import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-S35G6PNC.js';
+import { Avatar } from './chunk-5OM447RW.js';
+import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PeopleRail-R64WVOSH.css';
+import { useId } from 'react';
+import { isCrewletCharacter } from '@crewlethq/icons/characters';
+import { XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PEOPLE_RAIL_LABELS = {
+  title: "People here",
+  close: "Close people",
+  you: "You",
+  nobody: "Nobody else is here right now.",
+  follow: "Follow",
+  following: "Following",
+  followName: (name) => `Follow ${name}`,
+  stopFollowingName: (name) => `Stop following ${name}`,
+  activity: PRESENCE_LABELS.activity
+};
+function peopleRailKey(member) {
+  return member.seat ?? member.id;
+}
+function PeopleRail({
+  members,
+  self,
+  following,
+  onFollow,
+  onClose,
+  actions,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...PEOPLE_RAIL_LABELS, ...overrides } : PEOPLE_RAIL_LABELS;
+  const headingID = useId();
+  const Heading = headingTag(useHeadingLevel());
+  const others = presenceOrder(collapseSessions(members));
+  return /* @__PURE__ */ jsxs("aside", { className: cx("crewlet-people-rail", className), "aria-labelledby": headingID, children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-people-rail__head", children: [
+      /* @__PURE__ */ jsx(Heading, { className: "crewlet-people-rail__title", id: headingID, children: labels.title }),
+      onClose && /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: labels.close, icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsxs("ul", { role: "list", className: "crewlet-people-rail__list", children: [
+      self && /* @__PURE__ */ jsxs("li", { className: "crewlet-people-rail__person", children: [
+        /* @__PURE__ */ jsx(PresenceBadge, { member: self }),
+        /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__text", children: /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__name", children: labels.you }) })
+      ] }),
+      others.map((member) => {
+        const key = peopleRailKey(member);
+        const followed = following !== void 0 && following === key;
+        const extra = actions?.(member);
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-people-rail__person", children: [
+          /* @__PURE__ */ jsx(PresenceBadge, { member }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-people-rail__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__name", children: member.name }),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-people-rail__where", children: member.location ?? labels.activity(member.activity, member.kind) })
+          ] }),
+          extra !== void 0 && extra !== null || onFollow ? /* @__PURE__ */ jsxs("span", { className: "crewlet-people-rail__actions", children: [
+            extra,
+            onFollow && /* @__PURE__ */ jsx(
+              Button,
+              {
+                size: "small",
+                variant: followed ? "primary" : "secondary",
+                pressed: followed,
+                "aria-label": followed ? labels.stopFollowingName(member.name) : labels.followName(member.name),
+                onClick: () => onFollow(followed ? null : member),
+                children: followed ? labels.following : labels.follow
+              }
+            )
+          ] }) : null
+        ] }, key);
+      })
+    ] }),
+    others.length === 0 && /* @__PURE__ */ jsx("p", { className: "crewlet-people-rail__note", children: labels.nobody })
+  ] });
+}
+function PresenceBadge({ member }) {
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      name: member.name,
+      kind: member.kind,
+      src: member.src,
+      character: member.character !== void 0 && isCrewletCharacter(member.character) ? member.character : void 0,
+      hue: member.kind === "agent" ? member.hue : void 0,
+      size: "sm",
+      decorative: true
+    }
+  );
+}
+
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey };

package/dist/{chunk-AJESMWJS.js → chunk-LG244LY7.js}

@@ -1,10 +1,10 @@
-import { Menu } from './chunk-JULMZNGT.js';
 import { useClipboard } from './chunk-STJ7QBC3.js';
-import { Modal } from './chunk-7IJARUIF.js';
-import { Button } from './chunk-OG6CL3EB.js';
+import { Modal } from './chunk-F4DPAJCN.js';
 import { Checkbox } from './chunk-I6NZKJGK.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
+import { Menu } from './chunk-4MIM356A.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

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 };

package/dist/chunk-UO7JZVCO.js

@@ -0,0 +1,35 @@
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ConflictNote-DH77PYF7.css';
+import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CONFLICT_NOTE_LABELS = {
+  changedBy: (subject, name) => `${subject} was changed by ${name} since you opened it. Look again, then retry.`,
+  changed: (subject) => `${subject} was changed since you opened it. Look again, then retry.`,
+  dismiss: "Dismiss"
+};
+function ConflictNote({
+  subject,
+  changedBy,
+  message,
+  onDismiss,
+  actions,
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...CONFLICT_NOTE_LABELS, ...overrides } : CONFLICT_NOTE_LABELS;
+  const named = changedBy !== void 0 && changedBy !== "";
+  const sentence = named ? labels.changedBy(subject, changedBy) : message ?? labels.changed(subject);
+  return /* @__PURE__ */ jsxs("div", { ...rest, role: "alert", className: cx("crewlet-conflict-note", className), children: [
+    /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm", className: "crewlet-conflict-note__glyph" }),
+    /* @__PURE__ */ jsx("span", { className: "crewlet-conflict-note__text", children: sentence }),
+    (actions !== void 0 || onDismiss) && /* @__PURE__ */ jsxs("span", { className: "crewlet-conflict-note__actions", children: [
+      actions,
+      onDismiss && /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: onDismiss, children: labels.dismiss })
+    ] })
+  ] });
+}
+
+export { CONFLICT_NOTE_LABELS, ConflictNote };

package/dist/{chunk-HTCJSUIZ.js → chunk-XMGB3ZAT.js}

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