@crewlethq/ui 0.17.1 → 0.18.0

package/dist/{chunk-LOECRMHA.js → chunk-GFV4LJHH.js}

@@ -1,12 +1,13 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Tag-4BRQS6GN.css';
+import './Tag-SRGTK5KI.css';
 import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function Tag(props) {
   const {
     variant = "neutral",
+    hue,
     appearance = "soft",
     size = "sm",
     leadingIcon,
@@ -31,7 +32,7 @@ function Tag(props) {
   const drawnSize = acts && size === "xs" ? "sm" : size;
   const classes = cx(
     "crewlet-tag",
-    `crewlet-tag--${variant}`,
+    hue === void 0 ? `crewlet-tag--${variant}` : `crewlet-tag--hue-${hue}`,
     `crewlet-tag--${appearance}`,
     `crewlet-tag--${drawnSize}`,
     monospace && "crewlet-tag--monospace",
@@ -48,7 +49,7 @@ function Tag(props) {
     className
   );
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: variant, className: "crewlet-tag__dot" }) : null,
+    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: hue === void 0 ? variant : "neutral", className: "crewlet-tag__dot" }) : null,
     leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tag__icon", "aria-hidden": true, children: leadingIcon }) : null,
     /* @__PURE__ */ jsx("span", { className: "crewlet-tag__label", children }),
     count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-tag__count", children: count })

package/dist/chunk-I6POAB4V.js

@@ -0,0 +1,20 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './PresenceRing-M4C22Q6U.css';
+import { jsx } from 'react/jsx-runtime';
+
+function presenceHueClass(hue) {
+  return `crewlet-presence-hue--${hue}`;
+}
+function PresenceRing({ hue, state = "active", inset = 1, className, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-presence-ring", presenceHueClass(hue), state === "idle" && "crewlet-presence-ring--idle", className),
+      style: { "--crewlet-presence-ring-inset": `${inset}px`, ...style },
+      children
+    }
+  );
+}
+
+export { PresenceRing, presenceHueClass };

package/dist/{chunk-PQ63NLFC.js → chunk-IFKBDRNJ.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-DEEVA6TV.js';
+import { Modal } from './chunk-2TZATTIU.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-4GB57WIT.js';

package/dist/{chunk-6NN2F7GM.js → chunk-KVT3TJVG.js}

@@ -1,15 +1,15 @@
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-FSKTOIYC.js';
+import { DataTable } from './chunk-76FXDZAZ.js';
 import { Menu } from './chunk-NS7BVLL3.js';
-import { DateTimePicker } from './chunk-2UU5IGZI.js';
+import { DateTimePicker } from './chunk-5NVKTB6E.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-4GB57WIT.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-BWRGFKJP.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-LFZ45HV2.js

@@ -0,0 +1,46 @@
+import { EmptyState } from './chunk-RA2ULG6H.js';
+import { Card } from './chunk-EG6NYWVK.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AccessDeniedCard-WXM5DBDZ.css';
+import { ShieldGlyph, LockGlyph, EyeOffGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var ACCESS_DENIED_REASONS = ["not-found", "no-access", "revoked", "app-locked"];
+var LABELS = {
+  titles: {
+    "not-found": "This artifact does not exist, or it has not been shared with you",
+    "no-access": "You do not have access to this artifact",
+    revoked: "Your access to this artifact ended",
+    "app-locked": "Needs Artifacts access"
+  },
+  descriptions: {
+    "not-found": () => "Check the link, or ask whoever sent it to share the artifact with you.",
+    "no-access": (owner) => owner ? `Ask ${owner} to share it with you.` : "Ask its owner to share it with you.",
+    revoked: (owner) => owner ? `${owner} removed your access, or narrowed who can open it. Ask them if you still need it.` : "Its owner removed your access, or narrowed who can open it. Ask them if you still need it.",
+    "app-locked": () => "Your role does not include Artifacts. Ask an administrator to give you access."
+  }
+};
+var GLYPHS = {
+  "not-found": /* @__PURE__ */ jsx(EyeOffGlyph, { size: 32 }),
+  "no-access": /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
+  revoked: /* @__PURE__ */ jsx(LockGlyph, { size: 32 }),
+  "app-locked": /* @__PURE__ */ jsx(ShieldGlyph, { size: 32 })
+};
+function AccessDeniedCard({ reason, owner, action, headingLevel, className, labels }) {
+  const text = {
+    titles: { ...LABELS.titles, ...labels?.titles },
+    descriptions: { ...LABELS.descriptions, ...labels?.descriptions }
+  };
+  return /* @__PURE__ */ jsx(Card, { padding: "lg", className: cx("crewlet-access-denied-card", className), "data-reason": reason, children: /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      icon: GLYPHS[reason],
+      title: text.titles[reason],
+      description: text.descriptions[reason](owner),
+      action,
+      headingLevel
+    }
+  ) });
+}
+
+export { ACCESS_DENIED_REASONS, AccessDeniedCard };

package/dist/{chunk-6TSZCBID.js → chunk-NP2C4Y4E.js}

@@ -1,4 +1,4 @@
-import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-K3OWD7BJ.js';
+import { useThemePreference, useSystemTheme, resolveTheme } from './chunk-Z24ZUSTX.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { SunGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-FA2V2VT6.js → chunk-NZY77ZDU.js}

@@ -1,11 +1,11 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-DEEVA6TV.js';
+import { Modal } from './chunk-2TZATTIU.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-4GB57WIT.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
+import { Input } from './chunk-4GB57WIT.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/chunk-PPAQFGS2.js

@@ -0,0 +1,12 @@
+import { changeText, sheetLabels } from './chunk-YYZRLLLY.js';
+import { Tooltip } from './chunk-QWOPX2MN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ChangeMark-3VMTW7MT.css';
+import { jsx } from 'react/jsx-runtime';
+
+function ChangeMark({ by, at, previous = null, locale, className, labels }) {
+  const text = changeText({ by, at }, sheetLabels(labels), previous, locale);
+  return /* @__PURE__ */ jsx(Tooltip, { content: text, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cx("crewlet-change-mark", className) }) });
+}
+
+export { ChangeMark };

package/dist/chunk-S35G6PNC.js

@@ -0,0 +1,80 @@
+import { NODE_HUES } from './chunk-AYKXMIOR.js';
+
+// src/PresenceModel/presence.ts
+var PRESENCE_ACTIVITIES = ["editing", "viewing", "idle"];
+var BAND = {
+  editing: { human: 0, agent: 1 },
+  viewing: { human: 2, agent: 3 },
+  idle: { human: 4, agent: 5 }
+};
+function presenceOrder(members) {
+  return members.map((member, index) => ({ member, index })).sort((a, b) => BAND[a.member.activity][a.member.kind] - BAND[b.member.activity][b.member.kind] || a.index - b.index).map(({ member }) => member);
+}
+var LIVELINESS = { editing: 2, viewing: 1, idle: 0 };
+function collapseSessions(members) {
+  const bySeat = /* @__PURE__ */ new Map();
+  const out = [];
+  for (const member of members) {
+    if (member.seat === void 0) {
+      out.push(member);
+      continue;
+    }
+    const at = bySeat.get(member.seat);
+    if (at === void 0) {
+      bySeat.set(member.seat, out.length);
+      out.push(member);
+    } else if (LIVELINESS[member.activity] > LIVELINESS[out[at].activity]) {
+      out[at] = member;
+    }
+  }
+  return out;
+}
+function assignPresenceHues(members, held = /* @__PURE__ */ new Map()) {
+  const out = /* @__PURE__ */ new Map();
+  const uses = new Map(NODE_HUES.map((hue) => [hue, 0]));
+  const take = (id, hue) => {
+    out.set(id, hue);
+    uses.set(hue, (uses.get(hue) ?? 0) + 1);
+  };
+  for (const member of members) {
+    if (member.kind === "agent" && member.hue !== void 0) take(member.id, member.hue);
+  }
+  for (const member of members) {
+    if (out.has(member.id)) continue;
+    const previous = held.get(member.id);
+    if (previous !== void 0) take(member.id, previous);
+  }
+  for (const member of members) {
+    if (out.has(member.id)) continue;
+    let pick = NODE_HUES[0];
+    for (const hue of NODE_HUES) if ((uses.get(hue) ?? 0) < (uses.get(pick) ?? 0)) pick = hue;
+    take(member.id, pick);
+  }
+  return out;
+}
+function joinNames(names, shown = 2) {
+  if (names.length === 0) return "";
+  if (names.length === 1) return names[0];
+  if (names.length <= shown) return `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`;
+  const rest = names.length - shown;
+  return `${names.slice(0, shown).join(", ")} and ${rest === 1 ? "1 other" : `${rest} others`}`;
+}
+var PRESENCE_LABELS = {
+  activity: (activity, kind) => activity === "editing" ? "Editing" : activity === "idle" ? "Idle" : kind === "agent" ? "Reading" : "Viewing",
+  here: (others, withSelf) => {
+    if (withSelf) return others === 0 ? "Only you are here" : `You and ${others === 1 ? "1 other" : `${others} others`} are here`;
+    return others === 1 ? "1 person is here" : `${others} people are here`;
+  },
+  member: (member) => {
+    if (member.location) return `${member.name}, ${member.location}`;
+    return `${member.name}, ${PRESENCE_LABELS.activity(member.activity, member.kind).toLowerCase()}`;
+  },
+  more: (count) => `${count} more`,
+  editing: (names) => `${names} is editing`,
+  alsoHere: (names) => names.length === 0 ? "" : `${joinNames(names)} ${names.length === 1 ? "is" : "are"} also here.`
+};
+function presenceLabels(overrides) {
+  return { ...PRESENCE_LABELS, ...overrides };
+}
+
+export { PRESENCE_ACTIVITIES, PRESENCE_LABELS, assignPresenceHues, collapseSessions, joinNames, presenceLabels, presenceOrder };

package/dist/chunk-VYDFB6PJ.js

@@ -0,0 +1,243 @@
+import { Skeleton } from './chunk-W5J7R5EB.js';
+import { frameThemeMessage, readFrameHello, frameOriginMatches, negotiateBridge, FRAME_MESSAGE, portTargetOrigin, checkFrameSandbox, httpOrigin, isFrameNonce, frameFragment, readOpenLink, externalUrl, isFocusExit } from './chunk-F6V2PTN6.js';
+import { Callout } from './chunk-SVSCLHHI.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SandboxedFrame-L6HBQZCD.css';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  loading: (title) => `Loading ${title}`,
+  failed: "This page failed to load.",
+  failedDetail: "It did not finish starting. Reload it, and if it fails again, ask its owner to republish it.",
+  navigated: "This page left its frame, so it was closed.",
+  navigatedDetail: "An artifact may only show its own pages. Reload it to open it again.",
+  refused: "This page cannot be shown safely.",
+  refusedDetail: "It arrived with a frame policy this dashboard does not accept.",
+  outdated: "This page needs a newer dashboard.",
+  outdatedDetail: "Reload the dashboard to update it, then open the page again.",
+  reload: "Reload"
+};
+var FRAME_HELLO_TIMEOUT_MS = 1e4;
+function framePolicy(src, origin, mode, sandbox, nonce, theme) {
+  const verdict = checkFrameSandbox(sandbox, mode);
+  if (!verdict.ok) return { ok: false, refusal: { kind: "sandbox", tokens: verdict.refused } };
+  const served = httpOrigin(src);
+  if (served === null) return { ok: false, refusal: { kind: "src" } };
+  const named = mode === "per_artifact" ? origin === served : origin === served || origin === "null";
+  if (!named) return { ok: false, refusal: { kind: "src" } };
+  if (!isFrameNonce(nonce)) return { ok: false, refusal: { kind: "nonce" } };
+  const url = new URL(src);
+  url.hash = frameFragment(nonce, theme);
+  return { ok: true, url: url.href, sandbox: verdict.value, origin: served };
+}
+function SandboxedFrame(props) {
+  const { src, nonce, origin, mode, sandbox } = props;
+  return /* @__PURE__ */ jsx(FrameInstance, { ...props }, [src, nonce, origin, mode, sandbox].join("\n"));
+}
+function FrameInstance(props) {
+  const {
+    src,
+    origin,
+    mode,
+    sandbox,
+    allow,
+    title,
+    theme,
+    nonce,
+    onReady: _onReady,
+    onMessage: _onMessage,
+    onOpenLink: _onOpenLink,
+    onFocusExit: _onFocusExit,
+    onStateChange: _onStateChange,
+    onRefusal: _onRefusal,
+    onReload,
+    helloTimeoutMs = FRAME_HELLO_TIMEOUT_MS,
+    labels,
+    className,
+    ...rest
+  } = props;
+  const text = { ...LABELS, ...labels };
+  const [initialTheme] = useState(theme);
+  const policy = useMemo(
+    () => framePolicy(src, origin, mode, sandbox, nonce, initialTheme),
+    [src, origin, mode, sandbox, nonce, initialTheme]
+  );
+  const [state, setState] = useState(policy.ok ? "loading" : "refused");
+  const latest = useRef(props);
+  latest.current = props;
+  const frameRef = useRef(null);
+  const regionRef = useRef(null);
+  const portRef = useRef(null);
+  useEffect(() => {
+    if (!policy.ok) latest.current.onRefusal?.(policy.refusal);
+  }, [policy]);
+  useEffect(() => {
+    latest.current.onStateChange?.(state);
+  }, [state]);
+  useEffect(() => {
+    if (!policy.ok) return void 0;
+    const frame = frameRef.current;
+    if (!frame) return void 0;
+    let ended = false;
+    let greeted = 0;
+    let credit = false;
+    let owed = false;
+    let loadTimer;
+    const refuse = (refusal) => latest.current.onRefusal?.(refusal);
+    const closePort = () => {
+      portRef.current?.close();
+      portRef.current = null;
+    };
+    const end = (next) => {
+      ended = true;
+      clearTimeout(mountTimer);
+      clearTimeout(loadTimer);
+      closePort();
+      setState(next);
+    };
+    const onPortMessage = (port, event) => {
+      if (ended || portRef.current !== port) return;
+      const data = event.data;
+      const raw = readOpenLink(data);
+      if (raw !== null) {
+        const url = externalUrl(raw);
+        if (url) latest.current.onOpenLink?.(url);
+        else refuse({ kind: "link", url: raw });
+        return;
+      }
+      if (isFocusExit(data)) {
+        const exit = latest.current.onFocusExit;
+        if (exit) exit();
+        else regionRef.current?.focus();
+        return;
+      }
+      latest.current.onMessage?.(data, port);
+    };
+    const onWindowMessage = (event) => {
+      if (ended || event.source === null || event.source !== frame.contentWindow) return;
+      const hello = readFrameHello(event.data);
+      if (!hello) return;
+      if (!frameOriginMatches(mode, policy.origin, event.origin)) {
+        refuse({ kind: "origin", origin: event.origin });
+        return;
+      }
+      if (hello.nonce !== nonce) {
+        refuse({ kind: "hello-nonce" });
+        return;
+      }
+      if (greeted > 0 && (mode === "shared" || credit)) {
+        refuse({ kind: "rehello" });
+        if (mode === "shared") end("navigated");
+        return;
+      }
+      const bridge = negotiateBridge(hello.bridge);
+      if (bridge === null) {
+        refuse({ kind: "bridge", offered: hello.bridge });
+        end("outdated");
+        return;
+      }
+      const channel = new MessageChannel();
+      const message = { type: FRAME_MESSAGE.port, bridge };
+      event.source.postMessage(message, {
+        targetOrigin: portTargetOrigin(mode, policy.origin),
+        transfer: [channel.port2]
+      });
+      closePort();
+      const port = channel.port1;
+      portRef.current = port;
+      port.onmessage = (portEvent) => onPortMessage(port, portEvent);
+      port.postMessage(frameThemeMessage(latest.current.theme));
+      greeted += 1;
+      clearTimeout(mountTimer);
+      if (owed) {
+        owed = false;
+        clearTimeout(loadTimer);
+      } else {
+        credit = true;
+      }
+      setState("ready");
+      latest.current.onReady?.(port, hello);
+    };
+    const onLoad = () => {
+      if (ended) return;
+      if (credit) {
+        credit = false;
+        return;
+      }
+      owed = true;
+      clearTimeout(loadTimer);
+      loadTimer = setTimeout(() => end(greeted > 0 ? "navigated" : "failed"), helloTimeoutMs);
+    };
+    window.addEventListener("message", onWindowMessage);
+    frame.addEventListener("load", onLoad);
+    const mountTimer = setTimeout(() => {
+      if (greeted === 0) end("failed");
+    }, helloTimeoutMs);
+    return () => {
+      ended = true;
+      window.removeEventListener("message", onWindowMessage);
+      frame.removeEventListener("load", onLoad);
+      clearTimeout(mountTimer);
+      clearTimeout(loadTimer);
+      closePort();
+    };
+  }, [policy, mode, nonce, helloTimeoutMs]);
+  const { mode: themeMode, palette, density } = theme;
+  useEffect(() => {
+    portRef.current?.postMessage(frameThemeMessage({ mode: themeMode, palette, density }));
+  }, [themeMode, palette, density]);
+  const live = policy.ok && (state === "loading" || state === "ready");
+  const ending = END_TEXT[state];
+  const credentialless = { credentialless: "" };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: regionRef,
+      role: "region",
+      "aria-label": title,
+      "aria-busy": state === "loading" || void 0,
+      tabIndex: -1,
+      "data-state": state,
+      className: cx("crewlet-sandboxed-frame", className),
+      children: [
+        live ? /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: frameRef,
+            className: "crewlet-sandboxed-frame__frame",
+            src: policy.url,
+            sandbox: policy.sandbox,
+            allow: allow ?? "",
+            title,
+            referrerPolicy: "no-referrer",
+            ...credentialless
+          }
+        ) : null,
+        state === "loading" ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__loading", children: /* @__PURE__ */ jsx(Skeleton, { variant: "box", width: "100%", height: "100%", label: text.loading(title) }) }) : null,
+        ending ? /* @__PURE__ */ jsx("div", { className: "crewlet-sandboxed-frame__end", children: /* @__PURE__ */ jsx(
+          Callout,
+          {
+            variant: "danger",
+            title: text[ending.title],
+            live: "polite",
+            action: onReload ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", onClick: onReload, children: text.reload }) : void 0,
+            children: text[ending.detail]
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+var END_TEXT = {
+  loading: null,
+  ready: null,
+  failed: { title: "failed", detail: "failedDetail" },
+  navigated: { title: "navigated", detail: "navigatedDetail" },
+  refused: { title: "refused", detail: "refusedDetail" },
+  outdated: { title: "outdated", detail: "outdatedDetail" }
+};
+
+export { FRAME_HELLO_TIMEOUT_MS, SandboxedFrame };

package/dist/chunk-WXAULPBH.js

@@ -0,0 +1,135 @@
+import { Timeline } from './chunk-AUQPBL4O.js';
+import { Button } from './chunk-OG6CL3EB.js';
+import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './VersionTimeline-EBJ6MIPJ.css';
+import { RotateCcwClockGlyph, PencilGlyph, ShieldGlyph, DatabaseGlyph, UploadGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var LABELS = {
+  list: "Versions",
+  version: (version) => `Version ${version}`,
+  latest: "Latest",
+  publish: "Published",
+  restore: (from) => from === void 0 ? "Restored" : `Restored version ${from}`,
+  schema: "Schema changed",
+  capabilities: "Capabilities changed",
+  compare: "Compare",
+  compareWith: (version) => `Compare with version ${version}`,
+  restoreAction: "Restore",
+  restoreVersion: (version) => `Restore version ${version}`,
+  labelAction: "Name",
+  labelVersion: (version) => `Name version ${version}`,
+  retention: (oldestKept) => oldestKept > 2 ? `Versions 1 to ${oldestKept - 1} are past the retention window and are no longer kept.` : "Version 1 is past the retention window and is no longer kept."
+};
+var GLYPHS = {
+  publish: /* @__PURE__ */ jsx(UploadGlyph, { size: "xs" }),
+  restore: /* @__PURE__ */ jsx(RotateCcwClockGlyph, { size: "xs" }),
+  schema: /* @__PURE__ */ jsx(DatabaseGlyph, { size: "xs" }),
+  capabilities: /* @__PURE__ */ jsx(ShieldGlyph, { size: "xs" })
+};
+function VersionTimeline({
+  versions,
+  latest,
+  selected,
+  against,
+  onSelect,
+  onCompare,
+  onRestore,
+  onLabel,
+  oldestKept,
+  now,
+  labels,
+  className,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const newest = latest ?? versions.reduce((high, item) => Math.max(high, item.version), 0);
+  const gap = oldestKept !== void 0 && oldestKept > 1;
+  return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": text.list, className: cx("crewlet-version-timeline", className), children: [
+    /* @__PURE__ */ jsx(Timeline, { children: versions.map((item) => {
+      const kind = item.kind ?? "publish";
+      const current = item.version === selected;
+      const compared = item.version === against;
+      const what = kind === "restore" ? text.restore(item.restoredFrom) : text[kind];
+      return /* @__PURE__ */ jsxs(
+        Timeline.Item,
+        {
+          marker: GLYPHS[kind],
+          label: false,
+          className: cx(current && "is-current", compared && "is-compared"),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "crewlet-version-timeline__select",
+                "aria-current": current || void 0,
+                onClick: () => onSelect(item.version),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__head", children: [
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__number", children: text.version(item.version) }),
+                    item.version === newest ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__latest", children: text.latest }) : null,
+                    item.label ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__label", children: item.label }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__summary", children: item.summary ?? what })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__meta", children: [
+              /* @__PURE__ */ jsx(PrincipalAvatar, { principal: item.author, size: "xs" }),
+              /* @__PURE__ */ jsx("span", { children: item.author.name }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+              /* @__PURE__ */ jsx(RelativeTime, { value: item.at, now }),
+              item.summary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsx("span", { children: what })
+              ] }) : null
+            ] }),
+            item.source ? /* @__PURE__ */ jsx("span", { className: "crewlet-version-timeline__source", children: item.source }) : null,
+            onCompare || onRestore || onLabel ? /* @__PURE__ */ jsxs("span", { className: "crewlet-version-timeline__actions", children: [
+              onCompare && !current ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  pressed: compared,
+                  "aria-label": text.compareWith(item.version),
+                  onClick: () => onCompare(compared ? null : item.version),
+                  children: text.compare
+                }
+              ) : null,
+              onRestore && item.version !== newest ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  leadingIcon: /* @__PURE__ */ jsx(RotateCcwClockGlyph, {}),
+                  "aria-label": text.restoreVersion(item.version),
+                  onClick: () => onRestore(item.version),
+                  children: text.restoreAction
+                }
+              ) : null,
+              onLabel ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  leadingIcon: /* @__PURE__ */ jsx(PencilGlyph, {}),
+                  "aria-label": text.labelVersion(item.version),
+                  onClick: () => onLabel(item.version),
+                  children: text.labelAction
+                }
+              ) : null
+            ] }) : null
+          ]
+        },
+        item.version
+      );
+    }) }),
+    gap ? /* @__PURE__ */ jsx("p", { className: "crewlet-version-timeline__gap", children: text.retention(oldestKept) }) : null
+  ] });
+}
+
+export { VersionTimeline };