@crewlethq/ui 0.24.0 → 0.26.0

package/dist/chunk-KNLJL3VP.js

@@ -0,0 +1,101 @@
+import { isComposing } from './chunk-R25RGPUB.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideStage-XIOTMMRU.css';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var SLIDE_WIDTH = 1920;
+var SLIDE_HEIGHT = 1080;
+function SlideStage({
+  children,
+  label,
+  fit = "width",
+  scale,
+  width = SLIDE_WIDTH,
+  height = SLIDE_HEIGHT,
+  className
+}) {
+  const box = useRef(null);
+  const [measured, setMeasured] = useState({
+    scale: 0,
+    left: 0,
+    top: 0
+  });
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (!el || scale !== void 0) return void 0;
+    const read = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (fit === "contain") {
+        const s2 = Math.min(w / width, h / height);
+        setMeasured({ scale: s2, left: (w - width * s2) / 2, top: (h - height * s2) / 2 });
+      } else {
+        setMeasured({ scale: w / width, left: 0, top: 0 });
+      }
+    };
+    read();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(read);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fit, scale, width, height]);
+  const s = scale ?? measured.scale;
+  const boxStyle = fit === "width" || scale !== void 0 ? { aspectRatio: `${width} / ${height}`, ...scale !== void 0 ? { width: width * scale } : {} } : {};
+  const frameStyle = {
+    width,
+    height,
+    transform: `translate(${scale === void 0 ? measured.left : 0}px, ${scale === void 0 ? measured.top : 0}px) scale(${s})`,
+    // Hidden until measured, so a slide is never painted at full size for
+    // one frame inside a thumbnail.
+    visibility: s > 0 ? "visible" : "hidden"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: box,
+      className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
+      style: boxStyle,
+      role: "group",
+      "aria-roledescription": "slide",
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx("div", { className: "crewlet-slide-stage__frame", style: frameStyle, children })
+    }
+  );
+}
+function typing(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  return target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName);
+}
+function useSlideKeys({ onNext, onPrevious, onFirst, onLast, onExit, enabled = true }) {
+  useEffect(() => {
+    if (!enabled) return void 0;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || isComposing(event) || typing(event.target)) return;
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      const act = {
+        ArrowRight: onNext,
+        ArrowDown: onNext,
+        PageDown: onNext,
+        " ": onNext,
+        Enter: onNext,
+        ArrowLeft: onPrevious,
+        ArrowUp: onPrevious,
+        PageUp: onPrevious,
+        Backspace: onPrevious,
+        Home: onFirst,
+        End: onLast,
+        Escape: onExit
+      };
+      const fn = act[event.key];
+      if (!fn) return;
+      if ((event.key === "Enter" || event.key === " ") && event.target instanceof HTMLButtonElement) return;
+      event.preventDefault();
+      fn();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [enabled, onNext, onPrevious, onFirst, onLast, onExit]);
+}
+
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys };

package/dist/chunk-KSSSFLE2.js

@@ -0,0 +1,105 @@
+import { SlideStage } from './chunk-KNLJL3VP.js';
+import { useReorder } from './chunk-XJ2QEBMM.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideFilmstrip-BCLNAHFX.css';
+import { useRef } from 'react';
+import { EyeOffGlyph, GripVerticalGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LABELS = {
+  list: "Slides",
+  slide: (position, title) => `Slide ${position}, ${title}`,
+  hidden: "Hidden when presenting",
+  untitled: "Untitled"
+};
+function SlideFilmstrip({
+  slides,
+  selected,
+  onSelect,
+  renderSlide,
+  onReorder,
+  className,
+  labels
+}) {
+  const text = { ...LABELS, ...labels };
+  const ids = slides.map((s) => s.id);
+  const byId = new Map(slides.map((s) => [s.id, s]));
+  const titleOf = (id) => byId.get(id)?.title || text.untitled;
+  const reorder = useReorder({
+    keys: ids,
+    onReorder: (next) => onReorder?.(next),
+    nameOf: (id) => text.slide(ids.indexOf(id) + 1, titleOf(id)),
+    axis: "vertical"
+  });
+  const order = onReorder ? reorder.order : ids;
+  const options = useRef(/* @__PURE__ */ new Map());
+  const go = (id) => {
+    if (!id) return;
+    onSelect(id);
+    options.current.get(id)?.focus();
+  };
+  const onKeyDown = (event) => {
+    const at = order.indexOf(selected);
+    const to = {
+      ArrowDown: order[at + 1],
+      ArrowUp: order[at - 1],
+      Home: order[0],
+      End: order[order.length - 1]
+    }[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    go(to);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-filmstrip", className), children: [
+    onReorder ? /* @__PURE__ */ jsx(VisuallyHidden, { id: reorder.hintId, children: reorder.hint }) : null,
+    /* @__PURE__ */ jsx(
+      "ol",
+      {
+        className: "crewlet-slide-filmstrip__list",
+        "aria-label": text.list,
+        ...onReorder ? reorder.containerProps : {},
+        children: order.map((id, i) => {
+          const slide = byId.get(id);
+          const isSelected = id === selected;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "crewlet-slide-filmstrip__item",
+              "data-selected": isSelected ? "true" : void 0,
+              "data-hidden": slide?.hidden ? "true" : void 0,
+              ...onReorder ? reorder.itemProps(id) : {},
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__number", "aria-hidden": "true", children: i + 1 }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    ref: (node) => {
+                      if (node) options.current.set(id, node);
+                      else options.current.delete(id);
+                    },
+                    className: "crewlet-slide-filmstrip__thumb",
+                    "aria-current": isSelected ? "true" : void 0,
+                    "aria-label": text.slide(i + 1, titleOf(id)) + (slide?.hidden ? `, ${text.hidden}` : ""),
+                    tabIndex: isSelected ? 0 : -1,
+                    onClick: () => go(id),
+                    onKeyDown,
+                    children: [
+                      /* @__PURE__ */ jsx(SlideStage, { label: text.slide(i + 1, titleOf(id)), children: renderSlide(id) }),
+                      slide?.hidden ? /* @__PURE__ */ jsx("span", { className: "crewlet-slide-filmstrip__hidden", children: /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }) }) : null
+                    ]
+                  }
+                ),
+                onReorder ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-slide-filmstrip__handle", ...reorder.handleProps(id), children: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }) }) : null
+              ]
+            },
+            id
+          );
+        })
+      }
+    )
+  ] });
+}
+
+export { SlideFilmstrip };

package/dist/{chunk-TXAFKH2A.js → chunk-KZOGQXSP.js}

@@ -168,6 +168,7 @@ function Canvas({
   touch = true,
   labels,
   onReady,
+  onViewChange,
   ref,
   className
 }) {
@@ -225,6 +226,11 @@ function Canvas({
   useLayoutEffect(() => {
     if (ready) apply(viewNow.current);
   }, [ready, size, content, apply]);
+  const reportView = useRef(onViewChange);
+  reportView.current = onViewChange;
+  useLayoutEffect(() => {
+    if (ready) reportView.current?.(view, size);
+  }, [ready, view, size]);
   useLayoutEffect(() => {
     layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT, { detail: view }));
   }, [view, layer]);

package/dist/{chunk-CS65QSIJ.js → chunk-LZHLSQYK.js}

@@ -1,6 +1,6 @@
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { SegmentedControl } from './chunk-7QL2OFP6.js';
-import { tabId } from './chunk-XJFOOXCF.js';
+import { SegmentedControl } from './chunk-RCQXUT5K.js';
+import { tabId } from './chunk-HJEVSQN6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MarkdownEditor-WOKV7CLK.css';

package/dist/chunk-MQEEQVG6.js

@@ -0,0 +1,62 @@
+import { Document } from './chunk-WI6K5M5X.js';
+import { ArtifactKindGlyph } from './chunk-6J35F334.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactCover-D4MBEJ5H.css';
+import './DashboardCover-RMINBODB.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function DocCover({ children, className }) {
+  return /* @__PURE__ */ jsx("span", { className: cx("crewlet-artifact-cover crewlet-doc-cover", className), children: /* @__PURE__ */ jsx(Document, { className: "crewlet-doc-cover__page", size: "sm", measure: "none", children }) });
+}
+var SHEET_COVER_COLUMNS = 4;
+var SHEET_COVER_ROWS = 5;
+function SheetCover({ columns, rows, className }) {
+  const shown = columns.slice(0, SHEET_COVER_COLUMNS);
+  return /* @__PURE__ */ jsxs("span", { className: cx("crewlet-artifact-cover crewlet-sheet-cover", className), style: { ["--crewlet-sheet-cover-columns"]: Math.max(shown.length, 1) }, children: [
+    shown.map((c, i) => /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cover__cell crewlet-sheet-cover__cell--head", children: c }, `h${i}`)),
+    rows.slice(0, SHEET_COVER_ROWS).map(
+      (row, r) => shown.map((_, i) => /* @__PURE__ */ jsx("span", { className: "crewlet-sheet-cover__cell", children: row[i] ?? "" }, `${r}-${i}`))
+    )
+  ] });
+}
+var MAX_STATS = 3;
+var MAX_SCHEMATIC = 8;
+var GRID_COLUMNS = 12;
+var COVER = "crewlet-artifact-cover crewlet-dashboard-cover";
+function DashboardCover({ stats = [], layout = [], className, ...rest }) {
+  const shown = stats.slice(0, MAX_STATS);
+  if (shown.length > 0) {
+    return /* @__PURE__ */ jsx("div", { ...rest, className: cx(COVER, "crewlet-dashboard-cover--stats", className), children: shown.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "crewlet-dashboard-cover__stat", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__label", children: stat.label }),
+      stat.value !== void 0 && stat.value !== "" ? /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__value", children: stat.value }) : stat.source ? /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__source", children: stat.source }) : null
+    ] }, `${index}:${stat.label}`)) });
+  }
+  const blocks = layout.slice(0, MAX_SCHEMATIC);
+  if (blocks.length > 0) {
+    return /* @__PURE__ */ jsx("div", { ...rest, className: cx(COVER, "crewlet-dashboard-cover--layout", className), children: blocks.map((block, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx("crewlet-dashboard-cover__block", `crewlet-dashboard-cover__block--${block.kind}`),
+        style: { gridColumn: `span ${clampColumns(block.w)}` },
+        children: block.kind === "chart" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__bar" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__bar" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__bar" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__bar" })
+        ] }) : block.kind === "table" || block.kind === "note" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__line" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__line" }),
+          /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__line" })
+        ] }) : /* @__PURE__ */ jsx("span", { className: "crewlet-dashboard-cover__figure" })
+      },
+      index
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { ...rest, className: cx(COVER, "crewlet-dashboard-cover--empty", className), children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind: "dashboard", size: 32 }) });
+}
+function clampColumns(w) {
+  if (!Number.isFinite(w)) return GRID_COLUMNS;
+  return Math.min(GRID_COLUMNS, Math.max(1, Math.round(w)));
+}
+
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover };

package/dist/chunk-NBWNLYWZ.js

@@ -0,0 +1,62 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './CanvasSchematic-PLB3N46J.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var MARGIN = 0.06;
+function CanvasSchematic({
+  label,
+  boards,
+  notes = [],
+  cover,
+  className,
+  ...rest
+}) {
+  const all = [...boards, ...notes];
+  const minX = Math.min(...all.map((r) => r.x));
+  const minY = Math.min(...all.map((r) => r.y));
+  const maxX = Math.max(...all.map((r) => r.x + r.w));
+  const maxY = Math.max(...all.map((r) => r.y + r.h));
+  const side = Math.max(maxX - minX, maxY - minY, 1);
+  const pad = side * MARGIN;
+  const viewBox = all.length === 0 ? "0 0 1 1" : `${minX - pad} ${minY - pad} ${maxX - minX + 2 * pad} ${maxY - minY + 2 * pad}`;
+  const coverBoard = boards.find((b) => b.id === cover);
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-canvas-schematic", className), ...rest, children: /* @__PURE__ */ jsxs("svg", { viewBox, preserveAspectRatio: "xMidYMid meet", role: "img", "aria-label": label, children: [
+    notes.map((n, i) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: "crewlet-canvas-schematic__note",
+        x: n.x,
+        y: n.y,
+        width: n.w,
+        height: n.h
+      },
+      `note-${i}`
+    )),
+    boards.map((b) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        className: "crewlet-canvas-schematic__board",
+        "data-cover": b.id === cover || void 0,
+        x: b.x,
+        y: b.y,
+        width: b.w,
+        height: b.h,
+        vectorEffect: "non-scaling-stroke"
+      },
+      b.id
+    )),
+    coverBoard?.title && /* @__PURE__ */ jsx(
+      "text",
+      {
+        className: "crewlet-canvas-schematic__title",
+        x: coverBoard.x + coverBoard.w * 0.08,
+        y: coverBoard.y + coverBoard.h * 0.5,
+        fontSize: Math.min(coverBoard.h * 0.16, side * 0.06),
+        dominantBaseline: "middle",
+        children: coverBoard.title
+      }
+    )
+  ] }) });
+}
+
+export { CanvasSchematic };

package/dist/{chunk-YYZRLLLY.js → chunk-NHBP2XS5.js}

@@ -1,4 +1,4 @@
-import { PRESENCE_LABELS } from './chunk-S35G6PNC.js';
+import { PRESENCE_LABELS } from './chunk-Z7JYG5TF.js';
 import { isNodeHue } from './chunk-AYKXMIOR.js';
 
 // src/SheetModel/types.ts
@@ -69,10 +69,16 @@ var SHEET_LABELS = {
       return state.saving === 0 ? "Offline." : `Offline. ${changes(state.saving)} will sync when you reconnect.`;
     }
     if (state.failed !== void 0 && state.failed > 0) return "Could not save.";
+    if (state.refused !== void 0 && state.refused > 0) return `${changes(state.refused)} not saved`;
     if (state.saving > 0) return `Saving ${changes(state.saving)}`;
     return "Saved";
   },
   retry: "Retry",
+  dismiss: "Dismiss",
+  notSaved: (reason) => `Not saved: ${reason}`,
+  rowActions: (row) => `Row actions for row ${row}`,
+  deleteRow: "Delete row",
+  rowActionsHelp: "Shift and F10 opens the actions of the row.",
   filter: "Filter options",
   noOptions: "No matching options",
   clear: "Clear",
@@ -693,9 +699,19 @@ var SheetPendingEdits = class {
     for (const value of this.waiting.values()) count += value;
     return count;
   }
-  /** The sync strip's state. Refusals are said on their cells, so they do not count as failures to retry. */
+  /** Clears every refusal at once: the strip's Dismiss. */
+  dismissAll() {
+    if (this.refusals.size === 0) return;
+    this.refusals.clear();
+    this.emit();
+  }
+  /**
+   * The sync strip's state. A refusal is not a failure to retry (the engine
+   * decided it), but it is counted, so the strip holds "not saved" until the
+   * reader dismisses it rather than going back to "Saved".
+   */
   sync(offline = false) {
-    return { saving: this.saving, offline };
+    return { saving: this.saving, offline, refused: this.refusals.size };
   }
   /** Every refusal since the last `resetFailures`, for a host that reports them. */
   get failures() {

package/dist/chunk-O2EGEONV.js

@@ -0,0 +1,90 @@
+import { useAnnouncer } from './chunk-RSAQOKH3.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './TagGroup-NAXTJHDS.css';
+import { useState, useRef, Children, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TagGroup({
+  label,
+  max = 6,
+  overflow = "expand",
+  moreLabel = (hidden) => `+${hidden} more`,
+  countLabel = (hidden) => `+${hidden}`,
+  expandedMessage = (total) => `Showing all ${total}.`,
+  className,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const announce = useAnnouncer();
+  const list = useRef(null);
+  const all = Children.toArray(children);
+  const fit = overflow === "fit";
+  const fitted = useFitted(list, fit, all.length);
+  const shown = fit ? all.slice(0, fitted) : open ? all : all.slice(0, max);
+  const hidden = all.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ref: list,
+      tabIndex: -1,
+      className: cx("crewlet-tag-group", fit && "crewlet-tag-group--fit", className),
+      "aria-label": `${label}, ${all.length}`,
+      children: [
+        shown.map((tag, index) => (
+          // Keyed by position: the list only ever grows at the end, as the tail
+          // is revealed, so no item ever changes the index it sits at.
+          /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: tag }, index)
+        )),
+        hidden > 0 && fit ? /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", "data-count": "", children: /* @__PURE__ */ jsx("span", { className: "crewlet-tag-group__count", children: countLabel(hidden) }) }) : hidden > 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-tag-group__item", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-tag-group__more",
+            onClick: () => {
+              setOpen(true);
+              list.current?.focus();
+              announce(expandedMessage(all.length));
+            },
+            children: moreLabel(hidden)
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function useFitted(list, active, total) {
+  const [fitted, setFitted] = useState(total);
+  const width = useRef(null);
+  useLayoutEffect(() => {
+    if (!active) return;
+    setFitted(total);
+  }, [active, total]);
+  useLayoutEffect(() => {
+    const box = list.current;
+    if (!active || !box) return;
+    const items = [...box.children];
+    const first = items[0];
+    if (!first) return;
+    const top = first.offsetTop;
+    const tags = items.filter((item) => !item.hasAttribute("data-count"));
+    const count = items.find((item) => item.hasAttribute("data-count"));
+    const onLine = tags.filter((item) => item.offsetTop === top).length;
+    const room = count && count.offsetTop !== top ? onLine - 1 : onLine;
+    const next = Math.max(1, Math.min(room, tags.length));
+    if (next < tags.length) setFitted(next);
+  }, [list, active, fitted, total]);
+  useLayoutEffect(() => {
+    const box = list.current;
+    if (!active || !box || typeof ResizeObserver !== "function") return void 0;
+    const observer = new ResizeObserver(([entry]) => {
+      const now = entry?.contentRect.width ?? 0;
+      if (width.current !== null && width.current !== now) setFitted(total);
+      width.current = now;
+    });
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [list, active, total]);
+  return active ? fitted : total;
+}
+
+export { TagGroup };

package/dist/{chunk-YM3GJHGW.js → chunk-ODT5H4MN.js}

@@ -1,5 +1,5 @@
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-import { presenceLabels, presenceOrder } from './chunk-S35G6PNC.js';
+import { presenceLabels, presenceOrder } from './chunk-Z7JYG5TF.js';
 import { AVATAR_SIZES, Avatar } from './chunk-5OM447RW.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-JCSXFAXG.js → chunk-OJRDEVHV.js}

@@ -1,6 +1,6 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-35UKQ33X.js';
+import { DataTable } from './chunk-SVW3VG72.js';
 import { DateTimePicker } from './chunk-WG5WUFBX.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';

package/dist/{chunk-U63Y5OCW.js → chunk-PRNX5AFE.js}

@@ -1,7 +1,7 @@
-import { HuePicker } from './chunk-OQT7GSKJ.js';
+import { HuePicker } from './chunk-SGIQCI6Y.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-5PSXBL73.js';
+import { CharacterPicker } from './chunk-HVIX5ECM.js';
 import { Avatar } from './chunk-5OM447RW.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/chunk-Q4A5CGUB.js

@@ -0,0 +1,43 @@
+import { SlideStage } from './chunk-KNLJL3VP.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './SlideGrid-RT6QEQEE.css';
+import { EyeOffGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var LABELS = {
+  slide: (position, title) => `Slide ${position}, ${title}`,
+  hidden: "Hidden when presenting",
+  untitled: "Untitled"
+};
+function SlideGrid({ sections, renderSlide, onOpen, current, className, labels }) {
+  const text = { ...LABELS, ...labels };
+  let n = 0;
+  return /* @__PURE__ */ jsx("div", { className: cx("crewlet-slide-grid", className), children: sections.map((section, s) => /* @__PURE__ */ jsxs("section", { className: "crewlet-slide-grid__section", children: [
+    section.title ? /* @__PURE__ */ jsx("h3", { className: "crewlet-slide-grid__heading", children: section.title }) : null,
+    /* @__PURE__ */ jsx("ol", { className: "crewlet-slide-grid__list", children: section.slides.map((slide) => {
+      n += 1;
+      const name = text.slide(n, slide.title || text.untitled);
+      return /* @__PURE__ */ jsx("li", { className: "crewlet-slide-grid__item", children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "crewlet-slide-grid__card",
+          "aria-label": slide.hidden ? `${name}, ${text.hidden}` : name,
+          "aria-current": slide.id === current ? "true" : void 0,
+          "data-hidden": slide.hidden ? "true" : void 0,
+          onClick: () => onOpen(slide.id),
+          children: [
+            /* @__PURE__ */ jsx(SlideStage, { label: name, children: renderSlide(slide.id) }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-grid__caption", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-slide-grid__number", children: n }),
+              /* @__PURE__ */ jsx("span", { className: "crewlet-slide-grid__title", children: slide.title || text.untitled }),
+              slide.hidden ? /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }) : null
+            ] })
+          ]
+        }
+      ) }, slide.id);
+    }) })
+  ] }, `${s}:${section.title}`)) });
+}
+
+export { SlideGrid };

package/dist/{chunk-7QL2OFP6.js → chunk-RCQXUT5K.js}

@@ -1,9 +1,9 @@
-import { tabId } from './chunk-XJFOOXCF.js';
-import { useRoving, tabStop } from './chunk-CBOICT64.js';
+import { tabId } from './chunk-HJEVSQN6.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';
-import { useId } from 'react';
+import { useState, useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var ACTIVATE_HINT = "Press Enter or Space to choose the option you land on.";
@@ -25,16 +25,27 @@ function SegmentedControl({
   const radio = semantics === "radio";
   const manual = radio && activate === "manual";
   const cards = options.some((option) => option.description !== void 0);
-  const { buttons, onKeyDown, onFocusAt, focused } = useRoving(
+  const { buttons, onKeyDown, onFocusAt, reset, focused } = useRoving(
     options.length,
-    radio && !manual ? (index) => onValueChange(options[index].value) : null,
+    radio && !manual ? (index) => {
+      const option = options[index];
+      if (!option.disabled) onValueChange(option.value);
+    } : null,
     { followFocus: manual }
   );
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    reset();
+  }
   const chosenIndex = Math.max(
     0,
     options.findIndex((option) => option.value === value)
   );
-  const stop = tabStop(options, focused ?? chosenIndex);
+  const stop = tabStop(
+    options.map((option) => ({ disabled: option.disabled === true && option.describedBy === void 0 })),
+    focused ?? chosenIndex
+  );
   const hintId = useId();
   const hint = manual ? activateHint === void 0 ? ACTIVATE_HINT : activateHint : null;
   return /* @__PURE__ */ jsxs(
@@ -66,6 +77,7 @@ function SegmentedControl({
         options.map((option, index) => {
           const chosen = option.value === value;
           const named = option.srLabel ?? (option.label ? void 0 : option.title);
+          const explained = option.disabled === true && option.describedBy !== void 0;
           return /* @__PURE__ */ jsxs(
             "button",
             {
@@ -81,14 +93,18 @@ function SegmentedControl({
               "aria-label": named,
               tabIndex: index === stop ? 0 : -1,
               title: option.title,
-              disabled: option.disabled,
+              disabled: option.disabled && !explained,
+              "aria-disabled": explained || void 0,
+              "aria-describedby": option.describedBy,
               className: cx(
                 "crewlet-tabs__tab",
                 "crewlet-segmented__option",
                 chosen && "is-active",
                 option.disabled && "is-disabled"
               ),
-              onClick: () => onValueChange(option.value),
+              onClick: () => {
+                if (!option.disabled) onValueChange(option.value);
+              },
               onFocus: () => onFocusAt(index),
               onKeyDown: (event) => onKeyDown(event, radio),
               children: [
@@ -97,7 +113,7 @@ function SegmentedControl({
                   /* @__PURE__ */ jsx("span", { className: "crewlet-tabs__label", children: option.label }),
                   option.description ? /* @__PURE__ */ jsx("span", { className: "crewlet-segmented__description", children: option.description }) : null
                 ] }) : null,
-                option.count != null ? /* @__PURE__ */ jsx(Count, { value: option.count }) : null
+                option.count != null ? /* @__PURE__ */ jsx(Count, { value: option.capped ? `${option.count.toLocaleString()}+` : option.count }) : null
               ]
             },
             option.value

package/dist/{chunk-CBOICT64.js → chunk-RKKO7QHH.js}

@@ -57,10 +57,12 @@ function useRoving(count, select, { followFocus = false, columns } = {}) {
     onFocusAt(next);
     select?.(next);
   };
+  const reset = () => setLanded(null);
   return {
     buttons,
     onKeyDown,
     onFocusAt,
+    reset,
     /*
      * Where the stop belongs, or null for "on the caller's selection, as
      * ever". Bounded by the CURRENT count, because a row whose options