@crewlethq/ui 0.32.0 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.32.0",
+  "version": "0.33.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.33.0",
+    "@crewlethq/tokens": "0.33.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/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-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 };

package/dist/chunk-RV7SZAHR.js

@@ -1,105 +0,0 @@
-import { SlideStage } from './chunk-E6CR5PEV.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 };