@crewlethq/ui 0.31.0 → 0.32.0

package/dist/styles.css

@@ -4143,7 +4143,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Canvas-YVXHMWLN.css */
+/* Canvas-LRVNW7XN.css */
 /*
  * A bounded viewport (Canvas.tsx). It fills the box it is given and clips; the
  * page's own scroller is never involved.
@@ -4183,7 +4183,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   position: absolute;
   inset: 0;
   overflow: hidden;
-  cursor: grab;
+  cursor: var(--crewlet-canvas-cursor-hand, grab);
   /* Until it is tapped, one finger belongs to the page's vertical scroll. */
   touch-action: pan-y;
 }
@@ -4201,8 +4201,28 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   touch-action: none;
 }
 
-.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport {
-  cursor: grabbing;
+/*
+ * THE POINTER SAYS WHAT A PRESS WILL DO. The drawings are the component's
+ * (`CURSORS`, written on the root), each falling back to its keyword. A pan in
+ * progress shows the closed hand whatever the tool, and it is set on the whole
+ * canvas rather than the field, so a drag that crosses a board or a note keeps
+ * the hand it started with.
+ */
+.crewlet-canvas[data-cursor='pointer'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+.crewlet-canvas[data-cursor='crosshair'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-crosshair, crosshair);
+}
+
+.crewlet-canvas[data-cursor='text'] .crewlet-canvas__viewport {
+  cursor: var(--crewlet-canvas-cursor-text, text);
+}
+
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport,
+.crewlet-canvas[data-panning='true'] .crewlet-canvas__viewport * {
+  cursor: var(--crewlet-canvas-cursor-grabbing, grabbing);
   user-select: none;
 }
 
@@ -4407,6 +4427,22 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-radius: var(--radius-chip);
 }
 
+/* Actual size, as a ratio: the readout's own control, at the button step. */
+.crewlet-canvas__actual {
+  width: var(--size-control-sm);
+}
+
+/*
+ * A control's tip with its shortcut (ShortcutTip.tsx): the words, then the
+ * keycaps, on one line.
+ */
+.crewlet-shortcut-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  white-space: nowrap;
+}
+
 .crewlet-canvas__zoom:hover:not(:disabled) {
   color: var(--color-text-primary);
   background: var(--color-surface-hover);
@@ -4474,7 +4510,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CanvasBoard-ZLPDINSM.css */
+/* CanvasBoard-MBZVBWDO.css */
 /*
  * 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
@@ -4493,6 +4529,25 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   position: relative;
 }
 
+/*
+ * UNDER HAND, TEXT AND STICKY NOTHING ON THE CANVAS TAKES A PRESS: every press
+ * reaches the field, which pans it (Hand) or places a note on it (Text and
+ * Sticky), and nothing is outlined under a pointer that cannot select it.
+ */
+.crewlet-canvas-board:not([data-tool='move']) .crewlet-canvas-board__layer {
+  pointer-events: none;
+}
+
+/* ---- the tool palette, floating at the foot of the field ----------------- */
+
+.crewlet-canvas-board__tools {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: 50%;
+  z-index: var(--z-index-raised);
+  transform: translateX(-50%);
+}
+
 /* ---- a board ------------------------------------------------------------ */
 
 .crewlet-canvas-board__board {
@@ -4500,13 +4555,37 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   box-sizing: border-box;
 }
 
+/*
+ * A BOARD'S EDGE IS A HAIRLINE, one screen pixel at every zoom, drawn as a
+ * ring outside the box rather than a border inside it: a border would take
+ * its width out of the page the board runs, and counter-scaled to stay one
+ * pixel it would take more the further out the canvas is zoomed. The strong
+ * hairline's ink, so a white page still has an edge on a light field and a
+ * dark one on a dark field.
+ */
 .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);
+  box-shadow: 0 0 0 calc(1px * var(--crewlet-canvas-board-unzoom)) var(--color-border-strong);
+}
+
+/*
+ * HOVER, then SELECTION, in the accent: one screen pixel and then two, over
+ * the hairline. Hovering a board's name is hovering its board, which is how a
+ * reader finds the board a name belongs to on a crowded canvas.
+ */
+.crewlet-canvas-board__board:hover .crewlet-canvas-board__body,
+.crewlet-canvas-board__note:hover {
+  outline: calc(1px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline-offset: 0;
+}
+
+.crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__body,
+.crewlet-canvas-board__note[data-selected] {
+  outline: calc(2px * var(--crewlet-canvas-board-unzoom)) solid var(--color-brand-accent);
+  outline-offset: 0;
 }
 
 /* The page a live board runs fills its frame exactly. */
@@ -4528,11 +4607,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-canvas-board__shield {
   position: absolute;
   inset: 0;
-  cursor: pointer;
-}
-
-.crewlet-canvas-board[data-editable] .crewlet-canvas-board__shield {
-  cursor: inherit;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
 }
 
 /* A board that is not running draws its title and size at screen size. */
@@ -4582,14 +4657,21 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   transform-origin: bottom left;
 }
 
+/* The board's name: small, quiet, and the accent once its board is picked out. */
 .crewlet-canvas-board__title {
   min-width: 0;
   overflow: hidden;
-  color: var(--color-text-secondary);
+  color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+.crewlet-canvas-board__board:hover .crewlet-canvas-board__title,
+.crewlet-canvas-board__board[data-selected] .crewlet-canvas-board__title {
+  color: var(--color-brand-accent-ink);
 }
 
 .crewlet-canvas-board__handle {
@@ -4600,7 +4682,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-radius: var(--radius-sm);
   background: transparent;
   font: inherit;
-  cursor: move;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
   touch-action: none;
 }
 
@@ -4616,55 +4698,114 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   outline-offset: var(--size-focus-ring-inset-offset);
 }
 
+/*
+ * A RESIZE CORNER: a full pointer target, drawn as the small square a design
+ * tool draws, centred on its corner and counter-scaled so it is one size on
+ * screen. Drawn on a selected item, and on the keyboard's corner while it has
+ * focus; otherwise it is neither seen nor pressed.
+ */
 .crewlet-canvas-board__resize {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: var(--spacing-4);
-  height: var(--spacing-4);
+  display: grid;
+  place-items: center;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
   margin: 0;
   padding: 0;
-  border: 2px solid var(--color-brand-accent);
+  border: none;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+}
+
+.crewlet-canvas-board__resize::before {
+  content: '';
+  width: var(--spacing-2);
+  height: var(--spacing-2);
+  box-sizing: border-box;
+  border: 1px solid var(--color-brand-accent);
   border-radius: var(--radius-xs);
   background: var(--color-surface-elevated);
+}
+
+.crewlet-canvas-board__board[data-selected] > .crewlet-canvas-board__resize,
+.crewlet-canvas-board__note[data-selected] .crewlet-canvas-board__resize,
+.crewlet-canvas-board__resize:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.crewlet-canvas-board__resize[data-corner='resize-nw'] {
+  top: 0;
+  left: 0;
   cursor: nwse-resize;
-  touch-action: none;
-  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+  transform: translate(-50%, -50%) scale(var(--crewlet-canvas-board-unzoom));
 }
 
-.crewlet-canvas-board__hint {
-  position: absolute;
-  top: 100%;
+.crewlet-canvas-board__resize[data-corner='resize-ne'] {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+  transform: translate(50%, -50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__resize[data-corner='resize-sw'] {
+  bottom: 0;
   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;
+  cursor: nesw-resize;
+  transform: translate(-50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
 }
 
+.crewlet-canvas-board__resize[data-corner='resize-se'] {
+  right: 0;
+  bottom: 0;
+  cursor: nwse-resize;
+  transform: translate(50%, 50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+
 /* ---- a note ------------------------------------------------------------- */
 
 .crewlet-canvas-board__note {
   position: absolute;
   box-sizing: border-box;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+/*
+ * A sticky's tools and corners sit outside its paper, so the paper does not
+ * clip; its words are held to the paper instead.
+ */
+.crewlet-canvas-board__note[data-kind='sticky'] {
+  overflow: visible;
+}
+
+.crewlet-canvas-board__note[data-kind='sticky'] .crewlet-canvas-board__note-text {
+  max-height: 100%;
+  overflow: hidden;
 }
 
 /*
- * 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.
+ * A TITLE IS SET TO FILL ITS BOX, 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, and a
+ * long one is set smaller rather than run over the boards beside it.
  */
 .crewlet-canvas-board__note[data-kind='title'] {
-  container-type: size;
   display: flex;
   align-items: center;
   color: var(--color-text-primary);
 }
 
+/*
+ * The size is the component's (`titleSize`), fitted to the box both ways. The
+ * TEXT clips at the box, not the box itself: the box's tools and corners sit
+ * outside it, and a box that clipped would cut them away.
+ */
 .crewlet-canvas-board__note[data-kind='title'] .crewlet-canvas-board__note-text {
-  font-size: 60cqh;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
   font-weight: var(--font-weight-semibold);
   letter-spacing: var(--font-letter-spacing-tight);
   line-height: var(--font-line-height-tight);
@@ -4752,6 +4893,41 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CanvasToolbar-AE5MXH7T.css */
+/*
+ * A canvas's tool palette (CanvasToolbar.tsx): the zoom bar's glass surface,
+ * with the tool in hand drawn SOLID in the accent rather than the soft tint a
+ * toggle takes elsewhere, because it is the one fact about the palette a
+ * reader checks from across the field before every press.
+ */
+
+.crewlet-canvas-toolbar.crewlet-toolbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  background: var(--color-surface-glass);
+  backdrop-filter: blur(var(--blur-sm));
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn {
+  border-radius: var(--radius-chip);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn[aria-pressed='true'] {
+  color: var(--color-text-on-accent);
+  background: var(--color-brand-accent);
+}
+
+.crewlet-canvas-toolbar .crewlet-icon-btn[aria-pressed='true']:hover:not(:disabled) {
+  color: var(--color-text-on-accent);
+  background: var(--color-brand-accent-hover);
+}
+
+
 /* Card-KJOYHDTJ.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
@@ -11527,7 +11703,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EditingStatus-NFADEPSX.css */
+/* EditingStatus-L6THUAN7.css */
 /*
  * The editing status (EditingStatus.tsx): a word and a dot, in the bar's own
  * small step, quiet until something is unsaved.
@@ -11572,11 +11748,32 @@ svg.crewlet-datetime__chevron {
   margin-right: var(--spacing-2);
 }
 
+/*
+ * THE WORDS FOLD AND THE DOT STAYS where room is short, hidden from the eye
+ * and still read by a screen reader, so the status says the same thing to
+ * everyone. On a phone the state folds. On an artifact bar's narrow
+ * arrangement (below 640px, as ArtifactBar.css draws it) "Editing" folds too:
+ * the title has the row's room first, and Cancel and Save beside the dot
+ * already say an edit is open.
+ */
 @media (width < 480px) {
   .crewlet-editing-status__state {
     position: absolute;
     width: 1px;
     height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-editing-status__label,
+  .crewlet-editing-status__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
     overflow: hidden;
     clip-path: inset(50%);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.31.0",
+  "version": "0.32.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.0",
-    "@crewlethq/tokens": "0.31.0",
+    "@crewlethq/icons": "0.32.0",
+    "@crewlethq/tokens": "0.32.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{Editor-YZ7KG2RD.js → Editor-YWBUJAQU.js}

@@ -1,5 +1,5 @@
-import { richEditorLabels } from './chunk-A4E5YLXO.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-YFW4MTK4.js';
+import { richEditorLabels } from './chunk-A4E5YLXO.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-SKOYC2CF.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
 import { FormField, Input } from './chunk-6QFAK2WV.js';

package/dist/{chunk-UVJ5FF5V.js → chunk-3ZAFJ4GK.js}

@@ -1,8 +1,8 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-EBJREOKS.js';
 import { DateTimePicker } from './chunk-Y5NQ2LMS.js';
+import { DataTable } from './chunk-EBJREOKS.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
+import { Toolbar } from './chunk-PGRPNDWM.js';
 import { Popover } from './chunk-BWRGFKJP.js';
 import { Input } from './chunk-6QFAK2WV.js';
 import { Kbd } from './chunk-SMBKXWML.js';

package/dist/{chunk-CT4EZF62.js → chunk-LWXRD6L6.js}

@@ -1,8 +1,8 @@
 import { TagGroup } from './chunk-O2EGEONV.js';
-import { CursorFlag } from './chunk-3BYIWOTV.js';
-import { presenceHueClass } from './chunk-I6POAB4V.js';
 import { Tag } from './chunk-GFV4LJHH.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
+import { CursorFlag } from './chunk-3BYIWOTV.js';
+import { presenceHueClass } from './chunk-I6POAB4V.js';
 import { ChangeMark } from './chunk-YEKYVJQR.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-NHBP2XS5.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';