@crewlethq/ui 0.24.0 → 0.25.0

package/dist/chunk-3D7PSL2L.js

@@ -0,0 +1,438 @@
+import { Note } from './chunk-63WJLRB2.js';
+import { IDENTITY_VIEW, Canvas } from './chunk-KZOGQXSP.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CanvasBoard-ZLPDINSM.css';
+import { useState, useCallback, useMemo, useRef } from 'react';
+import { MaximizeGlyph, PencilGlyph, TrashGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/CanvasBoard/budget.ts
+var CANVAS_BOARD_MAX_LIVE = 12;
+var CANVAS_BOARD_MIN_LIVE_WIDTH = 160;
+function liveBoards(boards, view, viewport, max = CANVAS_BOARD_MAX_LIVE, minWidth = CANVAS_BOARD_MIN_LIVE_WIDTH) {
+  if (max <= 0 || viewport.width <= 0 || viewport.height <= 0) return [];
+  const ranked = [];
+  boards.forEach((b, index) => {
+    const left = b.x * view.k + view.x;
+    const top = b.y * view.k + view.y;
+    const width = b.w * view.k;
+    const height = b.h * view.k;
+    if (width < minWidth) return;
+    const seenW = Math.min(left + width, viewport.width) - Math.max(left, 0);
+    const seenH = Math.min(top + height, viewport.height) - Math.max(top, 0);
+    if (seenW <= 0 || seenH <= 0) return;
+    ranked.push({ id: b.id, area: seenW * seenH, index });
+  });
+  ranked.sort((a, b) => b.area - a.area || a.index - b.index);
+  return ranked.slice(0, max).sort((a, b) => a.index - b.index).map((r) => r.id);
+}
+var CANVAS_NOTE_COLORS = [
+  "yellow",
+  "pink",
+  "blue",
+  "green",
+  "purple"
+];
+var NOTE_TONES = {
+  yellow: "amber",
+  pink: "rose",
+  blue: "blue",
+  green: "green",
+  purple: "purple"
+};
+function noteName(note) {
+  const words = note.text.trim().replace(/\s+/g, " ");
+  return words.length > 40 ? `${words.slice(0, 39)}\u2026` : words;
+}
+var LABELS = {
+  size: (w, h) => `${w} by ${h}`,
+  open: (title) => `Open ${title} full size`,
+  move: (title) => `Move ${title}`,
+  resize: (title) => `Resize ${title}`,
+  editNote: "Edit note",
+  removeNote: "Delete note",
+  noteText: "Note text",
+  paused: "Zoom in to run this board",
+  active: "Press Escape to return to the canvas"
+};
+var KEY_STEP = 8;
+var KEY_STEP_LARGE = 64;
+var CONTENT_MARGIN = 160;
+function contentOf(boards, notes) {
+  const all = [...boards, ...notes];
+  if (all.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const r of all) {
+    minX = Math.min(minX, r.x);
+    minY = Math.min(minY, r.y);
+    maxX = Math.max(maxX, r.x + r.w);
+    maxY = Math.max(maxY, r.y + r.h);
+  }
+  return {
+    x: minX - CONTENT_MARGIN,
+    y: minY - CONTENT_MARGIN,
+    width: maxX - minX + 2 * CONTENT_MARGIN,
+    height: maxY - minY + 2 * CONTENT_MARGIN
+  };
+}
+var clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+function useFrameGestures(zoom, minSide, maxSide, commit) {
+  const [preview, setPreview] = useState(null);
+  const drag = useRef(null);
+  const next = useCallback(
+    (d, dx, dy) => d.mode === "move" ? { ...d.from, x: Math.round(d.from.x + dx), y: Math.round(d.from.y + dy) } : {
+      ...d.from,
+      w: clamp(Math.round(d.from.w + dx), minSide, maxSide),
+      h: clamp(Math.round(d.from.h + dy), minSide, maxSide)
+    },
+    [minSide, maxSide]
+  );
+  const handle = (id, mode, item) => {
+    const from = { x: item.x, y: item.y, w: item.w, h: item.h };
+    return {
+      onPointerDown: (event) => {
+        if (event.pointerType === "mouse" && event.button !== 0) return;
+        event.preventDefault();
+        try {
+          event.currentTarget.setPointerCapture(event.pointerId);
+        } catch {
+        }
+        drag.current = {
+          id,
+          mode,
+          pointer: event.pointerId,
+          startX: event.clientX,
+          startY: event.clientY,
+          from,
+          moved: false
+        };
+      },
+      onPointerMove: (event) => {
+        const d = drag.current;
+        if (!d || d.pointer !== event.pointerId) return;
+        d.moved = true;
+        setPreview({
+          id,
+          rect: next(d, (event.clientX - d.startX) / zoom, (event.clientY - d.startY) / zoom)
+        });
+      },
+      onPointerUp: (event) => {
+        const d = drag.current;
+        if (!d || d.pointer !== event.pointerId) return;
+        drag.current = null;
+        setPreview(null);
+        if (!d.moved) return;
+        const rect = next(d, (event.clientX - d.startX) / zoom, (event.clientY - d.startY) / zoom);
+        const start = d.from;
+        if (rect.x !== start.x || rect.y !== start.y || rect.w !== start.w || rect.h !== start.h) {
+          commit(id, rect);
+        }
+      },
+      onPointerCancel: () => {
+        drag.current = null;
+        setPreview(null);
+      },
+      onKeyDown: (event) => {
+        const step = event.shiftKey ? KEY_STEP_LARGE : KEY_STEP;
+        const delta = {
+          ArrowLeft: [-step, 0],
+          ArrowRight: [step, 0],
+          ArrowUp: [0, -step],
+          ArrowDown: [0, step]
+        };
+        const d = delta[event.key];
+        if (!d) return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = next(
+          { id, mode, pointer: -1, startX: 0, startY: 0, from, moved: true },
+          d[0],
+          d[1]
+        );
+        if (rect.x !== from.x || rect.y !== from.y || rect.w !== from.w || rect.h !== from.h) {
+          commit(id, rect);
+        }
+      }
+    };
+  };
+  return { preview, handle };
+}
+function CanvasBoard({
+  label,
+  boards,
+  notes = [],
+  renderBoard,
+  maxLive = CANVAS_BOARD_MAX_LIVE,
+  minLiveWidth = CANVAS_BOARD_MIN_LIVE_WIDTH,
+  editable = false,
+  minSide = 40,
+  maxSide = 8e3,
+  onBoardChange,
+  onNoteChange,
+  onNoteRemove,
+  onOpen,
+  onActivate,
+  controlsExtra,
+  labels,
+  canvasLabels,
+  canvasRef,
+  className
+}) {
+  const text = { ...LABELS, ...labels };
+  const [view, setView] = useState(IDENTITY_VIEW);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  const [active, setActive] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const activate = (id) => {
+    setActive(id);
+    onActivate?.(id);
+  };
+  const commitBoard = useCallback(
+    (id, rect) => onBoardChange?.(id, rect),
+    [onBoardChange]
+  );
+  const commitNote = useCallback(
+    (id, rect) => {
+      const note = notes.find((n) => n.id === id);
+      if (note) onNoteChange?.({ ...note, ...rect });
+    },
+    [notes, onNoteChange]
+  );
+  const boardGestures = useFrameGestures(view.k, minSide, maxSide, commitBoard);
+  const noteGestures = useFrameGestures(view.k, minSide, maxSide, commitNote);
+  const frameOf = (item, preview) => preview?.id === item.id ? { ...item, ...preview.rect } : item;
+  const drawnBoards = boards.map((b) => frameOf(b, boardGestures.preview));
+  const drawnNotes = notes.map((n) => frameOf(n, noteGestures.preview));
+  const content = useMemo(
+    () => contentOf(boards, notes),
+    // The content's bounds follow the committed frames, never a drag in
+    // progress: a bound that moved under the pointer would pan the canvas.
+    [boards, notes]
+  );
+  const largest = boards.reduce((w, b) => Math.max(w, b.w), 0);
+  const live = new Set(liveBoards(drawnBoards, view, viewport, maxLive, minLiveWidth));
+  const onKeyDown = (event) => {
+    if (event.key === "Escape" && active !== null) {
+      event.stopPropagation();
+      activate(null);
+    }
+  };
+  const zoomVar = { "--crewlet-canvas-board-zoom": String(view.k) };
+  return (
+    // The wrapper only hears Escape bubbling from inside the canvas; the
+    // canvas's own viewport is the focusable, labelled control.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("crewlet-canvas-board", className),
+        "data-editable": editable || void 0,
+        onKeyDown,
+        children: /* @__PURE__ */ jsx(
+          Canvas,
+          {
+            label,
+            content,
+            largestItemWidth: largest || void 0,
+            ground: "dotted",
+            controlsExtra,
+            labels: canvasLabels,
+            onViewChange: (nextView, size) => {
+              setView(nextView);
+              setViewport(size);
+            },
+            ref: canvasRef,
+            children: /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__layer", style: zoomVar, children: [
+              drawnBoards.map((b) => {
+                const isLive = live.has(b.id);
+                const isActive = !editable && active === b.id && isLive;
+                return /* @__PURE__ */ jsxs(
+                  "section",
+                  {
+                    className: "crewlet-canvas-board__board",
+                    "data-live": isLive || void 0,
+                    "data-active": isActive || void 0,
+                    "aria-label": `${b.title}, ${text.size(b.w, b.h)}`,
+                    style: { left: b.x, top: b.y, width: b.w, height: b.h },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__chrome", children: [
+                        editable ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "crewlet-canvas-board__title crewlet-canvas-board__handle",
+                            "aria-label": text.move(b.title),
+                            ...boardGestures.handle(b.id, "move", b),
+                            children: b.title
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__title", children: b.title }),
+                        onOpen && /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            size: "sm",
+                            variant: "ghost",
+                            label: text.open(b.title),
+                            icon: /* @__PURE__ */ jsx(MaximizeGlyph, {}),
+                            onClick: () => onOpen(b.id)
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__body", children: [
+                        isLive ? renderBoard(b) : /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__placeholder", children: /* @__PURE__ */ jsxs("span", { className: "crewlet-canvas-board__placeholder-text", children: [
+                          /* @__PURE__ */ jsx("span", { className: "crewlet-canvas-board__placeholder-title", children: b.title }),
+                          /* @__PURE__ */ jsx("span", { children: text.size(b.w, b.h) }),
+                          /* @__PURE__ */ jsx("span", { children: text.paused })
+                        ] }) }),
+                        isLive && !isActive && // A press here pans the canvas like the field around it;
+                        // a click without a drag hands this board the pointer.
+                        // The board's page stays reachable by keyboard through
+                        // its own frame, so the shield is pointer only.
+                        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "crewlet-canvas-board__shield",
+                            onClick: editable ? void 0 : () => activate(b.id)
+                          }
+                        )
+                      ] }),
+                      isActive && /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__hint", children: text.active }),
+                      editable && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: "crewlet-canvas-board__resize",
+                          "aria-label": text.resize(b.title),
+                          ...boardGestures.handle(b.id, "resize", b)
+                        }
+                      )
+                    ]
+                  },
+                  b.id
+                );
+              }),
+              drawnNotes.map((n) => /* @__PURE__ */ jsx(
+                NoteView,
+                {
+                  note: n,
+                  editable,
+                  editing: editing === n.id,
+                  text,
+                  moveHandle: noteGestures.handle(n.id, "move", n),
+                  resizeHandle: noteGestures.handle(n.id, "resize", n),
+                  onEdit: () => setEditing(n.id),
+                  onDone: (value) => {
+                    setEditing(null);
+                    const trimmed = value.trim();
+                    if (trimmed !== "" && value !== n.text) {
+                      const original = notes.find((o) => o.id === n.id);
+                      if (original) onNoteChange?.({ ...original, text: value });
+                    }
+                  },
+                  onCancel: () => setEditing(null),
+                  onRemove: () => onNoteRemove?.(n.id)
+                },
+                n.id
+              ))
+            ] })
+          }
+        )
+      }
+    )
+  );
+}
+function NoteView({
+  note,
+  editable,
+  editing,
+  text,
+  moveHandle,
+  resizeHandle,
+  onEdit,
+  onDone,
+  onCancel,
+  onRemove
+}) {
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    editing ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "crewlet-canvas-board__note-field",
+        "aria-label": text.noteText,
+        defaultValue: note.text,
+        autoFocus: true,
+        onBlur: (event) => onDone(event.currentTarget.value),
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            onCancel();
+          } else if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+            event.preventDefault();
+            onDone(event.currentTarget.value);
+          }
+        }
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "crewlet-canvas-board__note-text", children: note.text }),
+    editable && !editing && /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas-board__note-tools", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "crewlet-canvas-board__handle crewlet-canvas-board__note-move",
+          "aria-label": text.move(noteName(note)),
+          ...moveHandle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          label: text.editNote,
+          icon: /* @__PURE__ */ jsx(PencilGlyph, {}),
+          onClick: onEdit
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          label: text.removeNote,
+          icon: /* @__PURE__ */ jsx(TrashGlyph, {}),
+          onClick: onRemove
+        }
+      )
+    ] }),
+    editable && !editing && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "crewlet-canvas-board__resize",
+        "aria-label": text.resize(noteName(note)),
+        ...resizeHandle
+      }
+    )
+  ] });
+  const frame = { left: note.x, top: note.y, width: note.w, height: note.h };
+  if (note.kind === "sticky") {
+    return /* @__PURE__ */ jsx(
+      Note,
+      {
+        tone: NOTE_TONES[note.color ?? CANVAS_NOTE_COLORS[0]],
+        className: "crewlet-canvas-board__note",
+        "data-kind": "sticky",
+        style: frame,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-canvas-board__note", "data-kind": "title", style: frame, children: body });
+}
+
+export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards };

package/dist/{chunk-SJCKMSQK.js → chunk-5LUI3WQP.js}

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-A722MUNR.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Checkbox } from './chunk-IASV5UCP.js';
+import { Checkbox } from './chunk-7T42VQQT.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-IASV5UCP.js → chunk-7T42VQQT.js}

@@ -1,6 +1,6 @@
 import { FormField } from './chunk-6QFAK2WV.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Checkbox-KT7RS6QQ.css';
+import './Checkbox-5UORUG3F.css';
 import { forwardRef, useId, useRef, useCallback, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -9,6 +9,7 @@ var Checkbox = forwardRef(function Checkbox2({
   description,
   tone = "default",
   framed = false,
+  size = "md",
   indeterminate = false,
   onCheckedChange,
   onChange,
@@ -42,6 +43,7 @@ var Checkbox = forwardRef(function Checkbox2({
         "crewlet-checkbox",
         tone === "danger" && "crewlet-checkbox--danger",
         framed && "crewlet-checkbox--framed",
+        size === "sm" && "crewlet-checkbox--sm",
         disabled && "is-disabled",
         className
       ),

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

@@ -1,4 +1,4 @@
-import { useDownload, safeFilename } from './chunk-F6NZOVWL.js';
+import { useDownload, safeFilename } from './chunk-IW55G7XG.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { useMemo, useCallback } from 'react';

package/dist/chunk-BQYQWJPK.js

@@ -0,0 +1,80 @@
+import { Skeleton } from './chunk-W5J7R5EB.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './WidgetFrame-4EFJOJMW.css';
+import { useId } from 'react';
+import { ClockGlyph, LockGlyph, CircleAlertGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  live: "live",
+  asOf: "as of",
+  stale: "stale",
+  loading: (title) => `Loading ${title}`,
+  refused: "You do not have access to the data behind this figure.",
+  failed: "This figure could not be loaded.",
+  cite: "Source:"
+};
+function WidgetFrame({
+  title,
+  source,
+  onCite,
+  actions,
+  headingLevel = 3,
+  now,
+  labels,
+  className,
+  children,
+  ...rest
+}) {
+  const text = { ...LABELS, ...labels };
+  const titleId = useId();
+  const Heading = `h${headingLevel}`;
+  const blocked = source.status === "refused" || source.status === "failed";
+  const citation = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: text.cite }),
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__source", children: source.label }),
+    source.status === "live" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__when", children: text.live })
+    ] }) : source.asOf !== void 0 && source.asOf !== null && !blocked ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-widget-frame__when", children: [
+        text.asOf,
+        " ",
+        /* @__PURE__ */ jsx(RelativeTime, { value: source.asOf, now })
+      ] })
+    ] }) : null,
+    source.status === "stale" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-widget-frame__stale", children: [
+        /* @__PURE__ */ jsx(ClockGlyph, { size: "xs" }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: text.stale })
+      ] })
+    ] }) : null
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ...rest,
+      className: cx("crewlet-widget-frame", `crewlet-widget-frame--${source.status}`, className),
+      "aria-labelledby": titleId,
+      "aria-busy": source.status === "loading" || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "crewlet-widget-frame__head", children: [
+          /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-widget-frame__title", children: title }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-widget-frame__actions", children: actions }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-widget-frame__body", children: source.status === "loading" ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", rows: 3, label: text.loading(title) }) : blocked ? /* @__PURE__ */ jsxs("p", { className: "crewlet-widget-frame__blocked", children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__blocked-glyph", "aria-hidden": true, children: source.status === "refused" ? /* @__PURE__ */ jsx(LockGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) }),
+          /* @__PURE__ */ jsx("span", { children: source.detail ?? (source.status === "refused" ? text.refused : text.failed) })
+        ] }) : children }),
+        /* @__PURE__ */ jsx("footer", { className: "crewlet-widget-frame__cite", children: onCite ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-widget-frame__cite-button", onClick: onCite, children: citation }) : /* @__PURE__ */ jsx("span", { className: "crewlet-widget-frame__cite-text", children: citation }) })
+      ]
+    }
+  );
+}
+
+export { WidgetFrame };

package/dist/{chunk-KLIEPFEZ.js → chunk-C2FRTWKO.js}

@@ -1,6 +1,6 @@
 import { ThemeSwatch } from './chunk-MNFU2RNT.js';
 import { useHighlightRest } from './chunk-F73MC7EZ.js';
-import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ThemeGallery-NITASULQ.css';
 import { useId } from 'react';

package/dist/{chunk-APS747CR.js → chunk-EHQTPVV4.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-BVWSLXTY.js';
-import { SegmentedControl } from './chunk-7QL2OFP6.js';
+import { SegmentedControl } from './chunk-RCQXUT5K.js';
 import { EmptyState } from './chunk-RA2ULG6H.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
@@ -31,6 +31,7 @@ function VersionCompare({
   context = 3,
   from,
   to,
+  versions,
   note,
   actions,
   labels: overrides,
@@ -44,7 +45,8 @@ function VersionCompare({
   const PaneHeading = headingTag(inner);
   const hostChanges = changes !== void 0 && changes !== null;
   const canChanges = hostChanges || before !== void 0 && after !== void 0;
-  const canVersions = from !== void 0 && from !== null || to !== void 0 && to !== null;
+  const hostVersions = versions !== void 0 && versions !== null;
+  const canVersions = hostVersions || from !== void 0 && from !== null || to !== void 0 && to !== null;
   const shown = lens === "versions" ? canVersions ? "versions" : "changes" : canChanges ? "changes" : "versions";
   const diff = useMemo(() => {
     if (hostChanges || shown !== "changes" || before === void 0 || after === void 0) return null;
@@ -91,7 +93,7 @@ function VersionCompare({
       /* @__PURE__ */ jsx(DiffView, { sections: diff.sections, "aria-label": labels.region(fromLabel, toLabel) })
     ] }) : /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__changes", children: changes }) : /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__versions", children: [
       note !== void 0 && note !== null && /* @__PURE__ */ jsx("p", { className: "crewlet-version-compare__note", children: note }),
-      /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__panes", children: panes.map((pane) => /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__pane", children: [
+      hostVersions ? versions : /* @__PURE__ */ jsx("div", { className: "crewlet-version-compare__panes", children: panes.map((pane) => /* @__PURE__ */ jsxs("div", { className: "crewlet-version-compare__pane", children: [
         /* @__PURE__ */ jsx(PaneHeading, { className: "crewlet-version-compare__pane-title", children: pane.label }),
         /* @__PURE__ */ jsx(HeadingLevelProvider, { level: nextHeadingLevel(inner), children: pane.node })
       ] }, pane.key)) })

package/dist/{chunk-A2UXBCLO.js → chunk-FAQGGX2Z.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Section-QRUPRIQ2.css';
+import './Section-QR3ILQVK.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/chunk-FQCLKD7U.js

@@ -0,0 +1,2 @@
+import './Tabs-CJGO35BH.css';
+import './SegmentedControl-FLI45IOW.css';

package/dist/{chunk-J4OKGJQ6.js → chunk-FVLCTCMV.js}

@@ -1,4 +1,4 @@
-import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-S35G6PNC.js';
+import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
 import { Avatar } from './chunk-5OM447RW.js';
 import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-XJFOOXCF.js → chunk-HJEVSQN6.js}

@@ -1,4 +1,4 @@
-import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';