@crewlethq/ui 0.32.0 → 0.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.32.0",
-    "@crewlethq/tokens": "0.32.0",
+    "@crewlethq/icons": "0.34.0",
+    "@crewlethq/tokens": "0.34.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/AccessDeniedCard-WXM5DBDZ.css

@@ -1,8 +0,0 @@
-/* The card holds one empty state and nothing else, at a reading width, so a
-   refusal in a wide viewer body reads as one sentence rather than a banner. */
-
-.crewlet-access-denied-card {
-  width: 100%;
-  max-width: var(--size-measure);
-  margin-inline: auto;
-}

package/dist/ArtifactCard-EXVAEBV6.css

@@ -1,109 +0,0 @@
-/*
- * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
- * lines up whatever each preview is, then the title and up to three lines of
- * facts. `compact` is a row with the kind's glyph in place of the preview.
- */
-
-.crewlet-artifact-card {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
-  color: inherit;
-  text-decoration: none;
-}
-
-.crewlet-artifact-card--compact {
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--spacing-3);
-  padding: var(--spacing-3);
-}
-
-.crewlet-artifact-card__preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  aspect-ratio: 16 / 9;
-  overflow: hidden;
-  border-bottom: 1px solid var(--color-border-default);
-  background: var(--color-surface-inset);
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-artifact-card__glyph {
-  display: inline-flex;
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-artifact-card__glyph--compact {
-  flex: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--size-control-md);
-  height: var(--size-control-md);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-inset);
-}
-
-.crewlet-artifact-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
-  padding: var(--spacing-3);
-}
-
-.crewlet-artifact-card--compact .crewlet-artifact-card__body {
-  padding: 0;
-}
-
-.crewlet-artifact-card__title-row {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-.crewlet-artifact-card__title {
-  overflow: hidden;
-  color: var(--color-text-primary);
-  font-weight: var(--font-weight-semibold);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-artifact-card__pin {
-  display: inline-flex;
-  flex: none;
-  color: var(--color-text-tertiary);
-}
-
-.crewlet-artifact-card__facts {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
-}
-
-.crewlet-artifact-card__line {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-1) var(--spacing-2);
-  min-width: 0;
-}
-
-.crewlet-artifact-card__owner,
-.crewlet-artifact-card__presence {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-.crewlet-artifact-card__changes {
-  color: var(--color-text-secondary);
-  font-weight: var(--font-weight-medium);
-}

package/dist/DocTabsEditor-RCOWHX5J.css

@@ -1,78 +0,0 @@
-/*
- * DocTabsEditor: a document's tabs as rows an editor titles, opens, moves and
- * removes, with the row whose text is open marked, and a field to add one.
- * The rows are quiet inset bands, as ArrangeList's are.
- */
-
-.crewlet-doc-tabs-editor {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2);
-  min-width: 0;
-}
-
-.crewlet-doc-tabs-editor__list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.crewlet-doc-tabs-editor__item {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--spacing-1);
-  padding: var(--spacing-1);
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-subtle);
-}
-
-.crewlet-doc-tabs-editor__item.is-open {
-  border-color: var(--color-border-strong);
-}
-
-.crewlet-doc-tabs-editor__item[data-reorder='dragging'] {
-  border-style: dashed;
-  border-color: var(--color-border-strong);
-  background: transparent;
-}
-.crewlet-doc-tabs-editor__item[data-reorder='dragging'] > * {
-  opacity: 0.4;
-}
-
-.crewlet-doc-tabs-editor__handle {
-  flex-shrink: 0;
-  cursor: grab;
-  color: var(--color-text-tertiary);
-}
-.crewlet-doc-tabs-editor__handle:active {
-  cursor: grabbing;
-}
-
-.crewlet-doc-tabs-editor__field {
-  display: flex;
-  flex: 1 1 12rem;
-  flex-direction: column;
-  gap: var(--spacing-1);
-  min-width: 0;
-}
-
-.crewlet-doc-tabs-editor__problem {
-  color: var(--color-feedback-danger-ink);
-  font-size: var(--font-size-xs);
-}
-
-.crewlet-doc-tabs-editor__moves {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.crewlet-doc-tabs-editor__add {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--spacing-2);
-}

package/dist/PresenterView-T2C6ZZ3N.css

@@ -1,103 +0,0 @@
-/*
- * PresenterView: the presenter's own screen beside the room's.
- *
- * The notes take the space a glance needs: a large, readable size and their
- * own scroll, so a long note never pushes the next slide or the timer away.
- */
-
-.crewlet-presenter {
-  display: grid;
-  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
-  gap: var(--spacing-4);
-  height: 100%;
-  min-height: 0;
-  padding: var(--spacing-4);
-  background: var(--color-surface-background);
-  color: var(--color-text-primary);
-}
-
-.crewlet-presenter__main {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-  min-height: 0;
-}
-
-.crewlet-presenter__main .crewlet-slide-stage {
-  flex: 1;
-  min-height: 0;
-  border-radius: var(--radius-md);
-}
-
-.crewlet-presenter__controls {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-3);
-}
-
-.crewlet-presenter__position {
-  color: var(--color-text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-.crewlet-presenter__side {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-4);
-  min-height: 0;
-}
-
-.crewlet-presenter__next .crewlet-slide-stage {
-  border-radius: var(--radius-sm);
-  outline: 1px solid var(--color-border-default);
-}
-
-.crewlet-presenter__end {
-  margin: 0;
-  padding: var(--spacing-6) var(--spacing-3);
-  border: 1px dashed var(--color-border-default);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-tertiary);
-  text-align: center;
-}
-
-.crewlet-presenter__timer {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-2);
-}
-
-.crewlet-presenter__elapsed {
-  margin-right: auto;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-2xl);
-  font-variant-numeric: tabular-nums;
-}
-
-.crewlet-presenter__notes {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  padding: var(--spacing-3);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-subtle);
-  font-size: var(--font-size-lg);
-  line-height: 1.5;
-  white-space: pre-wrap;
-}
-
-.crewlet-presenter__notes p {
-  margin: 0;
-}
-
-.crewlet-presenter__empty {
-  color: var(--color-text-tertiary);
-}
-
-@media (max-width: 48rem) {
-  .crewlet-presenter {
-    grid-template-columns: minmax(0, 1fr);
-    height: auto;
-  }
-}

package/dist/SandboxedFrame-L6HBQZCD.css

@@ -1,50 +0,0 @@
-/*
- * The frame fills the box it is given. The page around it does not scroll
- * round the artifact: the artifact scrolls inside its own document, which is
- * what a viewer body that holds one wants.
- *
- * The region takes focus when the frame hands it back, and keeps the
- * document's own focus treatment then: a reader who just left a page by
- * keyboard needs to see where they landed.
- */
-
-.crewlet-sandboxed-frame {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-background);
-}
-
-.crewlet-sandboxed-frame__frame {
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  background: transparent;
-}
-
-/* Kept out of sight while it starts, so a document that has not painted in
-   the reader's palette yet is never what they see. It still loads. */
-.crewlet-sandboxed-frame[data-state='loading'] .crewlet-sandboxed-frame__frame {
-  visibility: hidden;
-}
-
-.crewlet-sandboxed-frame__loading {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  padding: var(--spacing-3);
-}
-
-.crewlet-sandboxed-frame__end {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  padding: var(--spacing-4);
-}

package/dist/chunk-CRKFL423.js

@@ -1,74 +0,0 @@
-import { SlideStage } from './chunk-E6CR5PEV.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './SlideCompare-MGM3U2ME.css';
-import { useState } from 'react';
-import { MinusGlyph, PlusGlyph, PencilGlyph, ArrowUpDownGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
-var SLIDE_COMPARE_LABELS = {
-  changed: "Changed",
-  added: "Added",
-  removed: "Removed",
-  unchanged: "Unchanged",
-  moved: (from, to) => `Moved from ${from} to ${to}`,
-  missing: (version) => `Not in ${version}`,
-  summary: (c) => [
-    c.changed && plural(c.changed, "slide changed", "slides changed"),
-    c.added && plural(c.added, "added", "added"),
-    c.removed && plural(c.removed, "removed", "removed"),
-    c.moved && plural(c.moved, "moved", "moved")
-  ].filter(Boolean).join(", ") + ".",
-  showUnchanged: (n) => `Show the ${plural(n, "unchanged slide", "unchanged slides")}`,
-  hideUnchanged: "Hide the unchanged slides",
-  identical: "The two versions hold the same slides, in the same order."
-};
-var MARKS = {
-  changed: PencilGlyph,
-  added: PlusGlyph,
-  removed: MinusGlyph,
-  unchanged: null
-};
-function SlideCompare({ rows, fromLabel, toLabel, className, labels }) {
-  const text = { ...SLIDE_COMPARE_LABELS, ...labels };
-  const [showAll, setShowAll] = useState(false);
-  const counts = { changed: 0, added: 0, removed: 0, moved: 0 };
-  for (const r of rows) {
-    if (r.change !== "unchanged") counts[r.change] += 1;
-    if (r.moved) counts.moved += 1;
-  }
-  const still = rows.filter((r) => r.change === "unchanged" && !r.moved);
-  const shown = showAll ? rows : rows.filter((r) => r.change !== "unchanged" || r.moved);
-  const differs = counts.changed + counts.added + counts.removed + counts.moved > 0;
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-slide-compare", className), children: [
-    /* @__PURE__ */ jsx("p", { className: "crewlet-slide-compare__summary", children: differs ? text.summary(counts) : text.identical }),
-    /* @__PURE__ */ jsx("ol", { className: "crewlet-slide-compare__list", children: shown.map((row) => {
-      const Mark = MARKS[row.change];
-      return /* @__PURE__ */ jsxs("li", { className: "crewlet-slide-compare__row", "data-change": row.change, children: [
-        /* @__PURE__ */ jsxs("div", { className: "crewlet-slide-compare__head", children: [
-          /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__title", children: [
-            row.toPosition ?? row.fromPosition,
-            ". ",
-            row.title
-          ] }),
-          row.change === "unchanged" && row.moved ? null : /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
-            Mark ? /* @__PURE__ */ jsx(Mark, { size: "sm" }) : null,
-            text[row.change]
-          ] }),
-          row.moved && row.fromPosition !== void 0 && row.toPosition !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-slide-compare__change", children: [
-            /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "sm" }),
-            text.moved(row.fromPosition, row.toPosition)
-          ] }) : null
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "crewlet-slide-compare__sides", children: [
-          { side: "from", label: fromLabel, node: row.from, at: row.fromPosition },
-          { side: "to", label: toLabel, node: row.to, at: row.toPosition }
-        ].map((s) => /* @__PURE__ */ jsx("div", { className: "crewlet-slide-compare__side", "data-side": s.side, children: s.node !== void 0 && s.node !== null ? /* @__PURE__ */ jsx(SlideStage, { label: `${s.label}, slide ${s.at ?? ""}, ${row.title}`, children: s.node }) : /* @__PURE__ */ jsx("p", { className: "crewlet-slide-compare__missing", children: text.missing(s.label) }) }, s.side)) })
-      ] }, row.key);
-    }) }),
-    still.length > 0 ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: () => setShowAll((v) => !v), children: showAll ? text.hideUnchanged : text.showUnchanged(still.length) }) : null
-  ] });
-}
-
-export { SLIDE_COMPARE_LABELS, SlideCompare };

package/dist/chunk-GOSQXEZU.js

@@ -1,102 +0,0 @@
-import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
-import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { AvatarStack } from './chunk-UAN5NE7M.js';
-import { Card } from './chunk-ACA27MZH.js';
-import { VisuallyHidden } from './chunk-BZFWDIV6.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './ArtifactCard-EXVAEBV6.css';
-import { useId } from 'react';
-import { TableGlyph, LayoutDashboardGlyph, PaletteGlyph, PresentationGlyph, FileTextGlyph, FileCodeGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var ARTIFACT_KINDS = ["html", "doc", "slides", "design", "dashboard", "sheet"];
-var KIND_GLYPHS = {
-  html: FileCodeGlyph,
-  doc: FileTextGlyph,
-  slides: PresentationGlyph,
-  design: PaletteGlyph,
-  dashboard: LayoutDashboardGlyph,
-  sheet: TableGlyph
-};
-function ArtifactKindGlyph({ kind, size = "md" }) {
-  const Drawn = KIND_GLYPHS[kind];
-  return /* @__PURE__ */ jsx(Drawn, { size });
-}
-var LABELS = {
-  kinds: { html: "Page", doc: "Doc", slides: "Slides", design: "Design", dashboard: "Dashboard", sheet: "Sheet" },
-  pinned: "Pinned",
-  version: (version) => `v${version}`,
-  changes: (count) => count === 1 ? "1 change since you looked" : `${count} changes since you looked`,
-  present: (count) => count === 1 ? "1 here now" : `${count} here now`,
-  updated: "Updated"
-};
-function ArtifactCard({
-  title,
-  kind,
-  href,
-  preview,
-  owner,
-  updatedAt,
-  updatedBy,
-  presence,
-  changes,
-  pinned = false,
-  version,
-  project,
-  size = "card",
-  className,
-  now,
-  labels
-}) {
-  const text = { ...LABELS, ...labels, kinds: { ...LABELS.kinds, ...labels?.kinds } };
-  const titleId = useId();
-  const factsId = useId();
-  const present = presence && presence.length > 0 ? presence : null;
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      href,
-      variant: "subtle",
-      padding: "none",
-      className: cx("crewlet-artifact-card", `crewlet-artifact-card--${size}`, className),
-      "aria-labelledby": titleId,
-      "aria-describedby": factsId,
-      children: [
-        size === "card" ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__preview", "aria-hidden": true, children: preview ?? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph", children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: 32 }) }) }) : /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__glyph crewlet-artifact-card__glyph--compact", "aria-hidden": true, children: /* @__PURE__ */ jsx(ArtifactKindGlyph, { kind, size: "lg" }) }),
-        /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__body", children: [
-          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__title-row", children: [
-            /* @__PURE__ */ jsx("span", { id: titleId, className: "crewlet-artifact-card__title", children: title }),
-            pinned ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__pin", title: text.pinned, "aria-hidden": true, children: /* @__PURE__ */ jsx(PinGlyph, { size: "xs" }) }) : null
-          ] }),
-          /* @__PURE__ */ jsxs("span", { id: factsId, className: "crewlet-artifact-card__facts", children: [
-            /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
-              /* @__PURE__ */ jsx("span", { children: text.kinds[kind] }),
-              project ? /* @__PURE__ */ jsx("span", { children: project }) : null,
-              version !== void 0 ? /* @__PURE__ */ jsx("span", { children: text.version(version) }) : null,
-              pinned ? /* @__PURE__ */ jsx(VisuallyHidden, { children: text.pinned }) : null
-            ] }),
-            /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
-              owner ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__owner", children: [
-                /* @__PURE__ */ jsx(PrincipalAvatar, { principal: owner, size: "xs" }),
-                /* @__PURE__ */ jsx("span", { children: owner.name })
-              ] }) : null,
-              /* @__PURE__ */ jsxs("span", { children: [
-                updatedBy ? `${updatedBy} ` : `${text.updated} `,
-                /* @__PURE__ */ jsx(RelativeTime, { value: updatedAt, now })
-              ] })
-            ] }),
-            present || changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__line", children: [
-              present ? /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-card__presence", children: [
-                /* @__PURE__ */ jsx(AvatarStack, { members: present, max: 3, size: "xs", decorative: true }),
-                /* @__PURE__ */ jsx("span", { children: text.present(present.length) })
-              ] }) : null,
-              changes !== void 0 && changes > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-card__changes", children: text.changes(changes) }) : null
-            ] }) : null
-          ] })
-        ] })
-      ]
-    }
-  );
-}
-
-export { ARTIFACT_KINDS, ArtifactCard, ArtifactKindGlyph };

package/dist/chunk-MBNFJSZS.js

@@ -1,107 +0,0 @@
-import { SlideStage } from './chunk-E6CR5PEV.js';
-import { Button } from './chunk-OG6CL3EB.js';
-import { IconButton } from './chunk-4FQT6ZAY.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './PresenterView-T2C6ZZ3N.css';
-import { useRef, useState, useEffect } from 'react';
-import { ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var LABELS = {
-  current: (position, total, title) => `Slide ${position} of ${total}, ${title}`,
-  next: (title) => `Next, ${title}`,
-  end: "End of the deck",
-  notes: "Speaker notes",
-  noNotes: "No notes for this slide.",
-  timer: "Time presenting",
-  pause: "Pause",
-  resume: "Resume",
-  reset: "Reset",
-  previous: "Previous slide",
-  forward: "Next slide",
-  position: (position, total) => `${position} of ${total}`
-};
-function formatStopwatch(ms) {
-  const total = Math.max(0, Math.floor(ms / 1e3));
-  const h = Math.floor(total / 3600);
-  const m = Math.floor(total % 3600 / 60);
-  const s = total % 60;
-  const ss = String(s).padStart(2, "0");
-  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
-}
-function PresenterView({
-  current,
-  currentTitle,
-  next,
-  nextTitle = "",
-  notes,
-  position,
-  total,
-  onNext,
-  onPrevious,
-  now = Date.now,
-  className,
-  labels
-}) {
-  const text = { ...LABELS, ...labels };
-  const clock = useRef(now);
-  clock.current = now;
-  const [banked, setBanked] = useState(0);
-  const [runningSince, setRunningSince] = useState(() => now());
-  const [tick, setTick] = useState(0);
-  useEffect(() => {
-    if (runningSince === null) return void 0;
-    const id = setInterval(() => setTick((t) => t + 1), 1e3);
-    return () => clearInterval(id);
-  }, [runningSince]);
-  const elapsed = banked + (runningSince === null ? 0 : clock.current() - runningSince);
-  const pause = () => {
-    if (runningSince === null) {
-      setRunningSince(clock.current());
-    } else {
-      setBanked(elapsed);
-      setRunningSince(null);
-    }
-  };
-  const reset = () => {
-    setBanked(0);
-    setRunningSince(runningSince === null ? null : clock.current());
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-presenter", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__main", children: [
-      /* @__PURE__ */ jsx(SlideStage, { label: text.current(position, total, currentTitle), fit: "contain", children: current }),
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__controls", children: [
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            label: text.previous,
-            icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
-            onClick: onPrevious,
-            disabledReason: position <= 1 ? text.previous : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "crewlet-presenter__position", "aria-live": "polite", children: text.position(position, total) }),
-        /* @__PURE__ */ jsx(
-          IconButton,
-          {
-            label: text.forward,
-            icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
-            onClick: onNext,
-            disabledReason: position >= total ? text.end : void 0
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("aside", { className: "crewlet-presenter__side", children: [
-      /* @__PURE__ */ jsx("div", { className: "crewlet-presenter__next", children: next ? /* @__PURE__ */ jsx(SlideStage, { label: text.next(nextTitle), children: next }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__end", children: text.end }) }),
-      /* @__PURE__ */ jsxs("div", { className: "crewlet-presenter__timer", children: [
-        /* @__PURE__ */ jsx("span", { role: "timer", "aria-label": text.timer, className: "crewlet-presenter__elapsed", children: formatStopwatch(elapsed) }),
-        /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: pause, children: runningSince === null ? text.resume : text.pause }),
-        /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: reset, children: text.reset })
-      ] }),
-      /* @__PURE__ */ jsx("section", { className: "crewlet-presenter__notes", "aria-label": text.notes, children: notes ? /* @__PURE__ */ jsx("p", { children: notes }) : /* @__PURE__ */ jsx("p", { className: "crewlet-presenter__empty", children: text.noNotes }) })
-    ] })
-  ] });
-}
-
-export { PresenterView, formatStopwatch };