@crewlethq/ui 0.31.1 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.31.1",
+  "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.31.1",
-    "@crewlethq/tokens": "0.31.1",
+    "@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/CanvasBoard-ZLPDINSM.css

@@ -1,236 +0,0 @@
-/*
- * A canvas of artboards and notes (CanvasBoard.tsx). Boards and notes are laid
- * out in canvas pixels inside the canvas's world and scale with it; their
- * chrome (titles, handles, tools) is counter-scaled by the zoom the component
- * writes on the layer, so it stays one size on screen.
- */
-
-.crewlet-canvas-board {
-  height: 100%;
-  min-height: 0;
-}
-
-.crewlet-canvas-board__layer {
-  --crewlet-canvas-board-zoom: 1;
-  --crewlet-canvas-board-unzoom: calc(1 / var(--crewlet-canvas-board-zoom));
-  position: relative;
-}
-
-/* ---- a board ------------------------------------------------------------ */
-
-.crewlet-canvas-board__board {
-  position: absolute;
-  box-sizing: border-box;
-}
-
-.crewlet-canvas-board__body {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-  border: 1px solid var(--color-border-default);
-  box-shadow: var(--shadow-xs);
-}
-
-/* The page a live board runs fills its frame exactly. */
-.crewlet-canvas-board__body > :not(.crewlet-canvas-board__shield) {
-  width: 100%;
-  height: 100%;
-}
-
-.crewlet-canvas-board__board[data-active] .crewlet-canvas-board__body {
-  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-focus);
-  outline-offset: 0;
-}
-
-/*
- * THE SHIELD over a live board that does not hold the pointer: a press on it
- * pans the canvas as the field around it does, because a sandboxed page would
- * otherwise swallow every press that began over it.
- */
-.crewlet-canvas-board__shield {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-
-.crewlet-canvas-board[data-editable] .crewlet-canvas-board__shield {
-  cursor: inherit;
-}
-
-/* A board that is not running draws its title and size at screen size. */
-.crewlet-canvas-board__placeholder {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  background: var(--color-surface-subtle);
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
-  text-align: center;
-}
-
-/* ONE BLOCK, SCALED ONCE: its lines keep their spacing at screen size rather
-   than each line shrinking back into the space the zoom left it. */
-.crewlet-canvas-board__placeholder-text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-1);
-  flex: none;
-  transform: scale(var(--crewlet-canvas-board-unzoom));
-}
-
-.crewlet-canvas-board__placeholder-title {
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-/* ---- chrome, at screen size --------------------------------------------- */
-
-.crewlet-canvas-board__chrome {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  box-sizing: border-box;
-  width: calc(100% * var(--crewlet-canvas-board-zoom));
-  padding-bottom: var(--spacing-1);
-  transform: scale(var(--crewlet-canvas-board-unzoom));
-  transform-origin: bottom left;
-}
-
-.crewlet-canvas-board__title {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--color-text-secondary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.crewlet-canvas-board__handle {
-  appearance: none;
-  margin: 0;
-  padding: var(--spacing-1) var(--spacing-2);
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  font: inherit;
-  cursor: move;
-  touch-action: none;
-}
-
-.crewlet-canvas-board__handle:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-border-default);
-}
-
-/* Both handles draw an edge of their own, so the ring sits over it. */
-.crewlet-canvas-board__handle:focus-visible,
-.crewlet-canvas-board__resize:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-.crewlet-canvas-board__resize {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: var(--spacing-4);
-  height: var(--spacing-4);
-  margin: 0;
-  padding: 0;
-  border: 2px solid var(--color-brand-accent);
-  border-radius: var(--radius-xs);
-  background: var(--color-surface-elevated);
-  cursor: nwse-resize;
-  touch-action: none;
-  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
-}
-
-.crewlet-canvas-board__hint {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin: 0;
-  padding-top: var(--spacing-1);
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
-  white-space: nowrap;
-  transform: scale(var(--crewlet-canvas-board-unzoom));
-  transform-origin: top left;
-}
-
-/* ---- a note ------------------------------------------------------------- */
-
-.crewlet-canvas-board__note {
-  position: absolute;
-  box-sizing: border-box;
-}
-
-/*
- * A TITLE IS SET IN ITS BOX'S OWN HEIGHT, so the author's frame is the type
- * size: a heading over a group of boards is as large as the box drawn for it.
- */
-.crewlet-canvas-board__note[data-kind='title'] {
-  container-type: size;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-primary);
-}
-
-.crewlet-canvas-board__note[data-kind='title'] .crewlet-canvas-board__note-text {
-  font-size: 60cqh;
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: var(--font-letter-spacing-tight);
-  line-height: var(--font-line-height-tight);
-  white-space: nowrap;
-}
-
-.crewlet-canvas-board__note-text {
-  margin: 0;
-  white-space: pre-wrap;
-}
-
-.crewlet-canvas-board__note-field {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  resize: none;
-}
-
-.crewlet-canvas-board__note-field:focus-visible {
-  outline: 2px solid var(--color-focus);
-  outline-offset: var(--size-focus-ring-inset-offset);
-}
-
-.crewlet-canvas-board__note-tools {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-1);
-  padding-bottom: var(--spacing-1);
-  transform: scale(var(--crewlet-canvas-board-unzoom));
-  transform-origin: bottom left;
-}
-
-.crewlet-canvas-board__note-move {
-  width: var(--spacing-6);
-  height: var(--spacing-6);
-  background-image: radial-gradient(var(--color-text-tertiary) 1px, transparent 1.5px);
-  background-size: var(--spacing-2) var(--spacing-2);
-}

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-ALMSY7RL.js

@@ -1,74 +0,0 @@
-import { SlideStage } from './chunk-O63MWA4G.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-LR5QTFOE.js

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