@crewlethq/ui 0.31.1 → 0.32.0

package/dist/{CanvasBoard-ZLPDINSM.css → CanvasBoard-MBZVBWDO.css}

@@ -16,6 +16,25 @@
   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 {
@@ -23,13 +42,37 @@
   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. */
@@ -51,11 +94,7 @@
 .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. */
@@ -105,14 +144,21 @@
   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 {
@@ -123,7 +169,7 @@
   border-radius: var(--radius-sm);
   background: transparent;
   font: inherit;
-  cursor: move;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
   touch-action: none;
 }
 
@@ -139,55 +185,114 @@
   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);

package/dist/CanvasToolbar/CanvasToolbar.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The floating palette of a canvas's tools: Move, Hand, and whatever a surface
+ * places (a text, a sticky), one of them in hand at a time.
+ *
+ * WHAT IT IS. A toolbar (one tab stop, walked with the arrows; see Toolbar)
+ * of toggle buttons, exactly one pressed. Each tool names its key, and the tip
+ * that opens on hover or focus says it, so a reader learns `V` and `H` from the
+ * palette rather than from a help page.
+ *
+ * WHAT IT IS NOT. It does not listen for the keys itself: which keys reach a
+ * canvas is the canvas's question (a page full of fields must not lose its `V`
+ * to a palette), so the surface that holds the tools matches its own presses
+ * against [toolForKey] and sets the tool it finds.
+ *
+ * Drawn as a glass bar like the canvas's zoom bar, so the two read as one
+ * family of chrome over the field.
+ */
+import type { ReactNode } from 'react';
+/** One tool in the palette. */
+export interface CanvasTool<Id extends string = string> {
+    id: Id;
+    /** What the tool does, in words: its accessible name and the tip's first words. */
+    label: string;
+    /** The glyph. A component from @crewlethq/icons/glyphs. */
+    icon: ReactNode;
+    /**
+     * The key that picks the tool, as Kbd names it: one letter, pressed alone.
+     * A letter rather than a chord, because a tool is picked dozens of times a
+     * minute and design tools have taught every reader their letters.
+     */
+    shortcut: string;
+}
+export interface CanvasToolbarProps<Id extends string = string> {
+    /** The palette's accessible name, such as "Tools". */
+    label: string;
+    tools: readonly CanvasTool<Id>[];
+    /** The tool in hand. */
+    value: Id;
+    onChange: (id: Id) => void;
+    className?: string | undefined;
+}
+/**
+ * The tool a key press picks, or undefined. A bare letter only: a press with
+ * Control, Command or Alt is somebody else's chord, and Shift is a different
+ * key in every design tool.
+ */
+export declare function toolForKey<Id extends string>(tools: readonly CanvasTool<Id>[], event: Pick<KeyboardEvent, 'key' | 'ctrlKey' | 'metaKey' | 'altKey' | 'shiftKey'>): Id | undefined;
+export declare function CanvasToolbar<Id extends string>({ label, tools, value, onChange, className, }: CanvasToolbarProps<Id>): import("react").JSX.Element;

package/dist/CanvasToolbar/index.d.ts

@@ -0,0 +1,3 @@
+import './CanvasToolbar.css';
+export { CanvasToolbar, toolForKey } from './CanvasToolbar.js';
+export type { CanvasTool, CanvasToolbarProps } from './CanvasToolbar.js';

package/dist/CanvasToolbar/index.js

@@ -0,0 +1,12 @@
+export { CanvasToolbar, toolForKey } from '../chunk-E6EWK5YY.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-OTN35CI4.js';
+import '../chunk-VYOKRN2I.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-QWOPX2MN.js';
+import '../chunk-HMPFGIWM.js';
+import '../chunk-R25RGPUB.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar-AE5MXH7T.css

@@ -0,0 +1,32 @@
+/*
+ * 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);
+}

package/dist/DataView/index.js

@@ -1,12 +1,12 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-RODMM35O.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-3ZAFJ4GK.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-PGRPNDWM.js';
 import '../chunk-Y5NQ2LMS.js';
 import '../chunk-EBJREOKS.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
+import '../chunk-PGRPNDWM.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7T42VQQT.js';

package/dist/PresenterView/index.js

@@ -1,5 +1,5 @@
-export { PresenterView, formatStopwatch } from '../chunk-OGAAHVF6.js';
-import '../chunk-O63MWA4G.js';
+export { PresenterView, formatStopwatch } from '../chunk-MBNFJSZS.js';
+import '../chunk-E6CR5PEV.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-VOX3YRFO.js';
+export { RichEditor, preloadRichEditor } from '../chunk-V5IGUXMZ.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-A4E5YLXO.js';
 import '../chunk-W5J7R5EB.js';
 import '../chunk-SKOYC2CF.js';

package/dist/SheetGrid/index.js

@@ -1,10 +1,10 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-CT4EZF62.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-LWXRD6L6.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
-import '../chunk-3BYIWOTV.js';
-import '../chunk-I6POAB4V.js';
 import '../chunk-GFV4LJHH.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-3BYIWOTV.js';
+import '../chunk-I6POAB4V.js';
 import '../chunk-YEKYVJQR.js';
 import '../chunk-NHBP2XS5.js';
 import '../chunk-Z7JYG5TF.js';

package/dist/SlideCompare/index.js

@@ -1,5 +1,5 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-ALMSY7RL.js';
-import '../chunk-O63MWA4G.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-CRKFL423.js';
+import '../chunk-E6CR5PEV.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/SlideFilmstrip/index.js

@@ -1,5 +1,5 @@
-export { SlideFilmstrip } from '../chunk-LR5QTFOE.js';
-import '../chunk-O63MWA4G.js';
+export { SlideFilmstrip } from '../chunk-RV7SZAHR.js';
+import '../chunk-E6CR5PEV.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/SlideGrid/index.js

@@ -1,5 +1,5 @@
-export { SlideGrid } from '../chunk-3C3BRIMY.js';
-import '../chunk-O63MWA4G.js';
+export { SlideGrid } from '../chunk-VS3KOOOL.js';
+import '../chunk-E6CR5PEV.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/SlideStage.d.ts

@@ -28,6 +28,11 @@ export interface SlideStageProps {
     /** The stage's own size, for a format other than 16:9 at 1920. */
     width?: number | undefined;
     height?: number | undefined;
+    /**
+     * What a screen reader calls what the stage holds: "slide" by default,
+     * "artboard" for a design's board shown at its own layout.
+     */
+    roleDescription?: string | undefined;
     className?: string | undefined;
 }
 /**
@@ -55,4 +60,4 @@ export interface SlideStageProps {
  * A GROUP NAMED AS A SLIDE, so a screen reader announces "slide" with its
  * name and reads its text in source order, which is the slide's reading order.
  */
-export declare function SlideStage({ children, label, fit, scale, width, height, className, }: SlideStageProps): import("react").JSX.Element;
+export declare function SlideStage({ children, label, fit, scale, width, height, roleDescription, className, }: SlideStageProps): import("react").JSX.Element;

package/dist/SlideStage/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-O63MWA4G.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-E6CR5PEV.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,7 +1,9 @@
-export { TreeCanvas } from '../chunk-S6VG5ZFZ.js';
+export { TreeCanvas } from '../chunk-WTNUVQVI.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-OJ45PPCV.js';
+import '../chunk-OTN35CI4.js';
 import '../chunk-VYOKRN2I.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-QWOPX2MN.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/{chunk-ALMSY7RL.js → chunk-CRKFL423.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-O63MWA4G.js';
+import { SlideStage } from './chunk-E6CR5PEV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideCompare-MGM3U2ME.css';

package/dist/{chunk-O63MWA4G.js → chunk-E6CR5PEV.js}

@@ -75,6 +75,7 @@ function SlideStage({
   scale,
   width = SLIDE_WIDTH,
   height = SLIDE_HEIGHT,
+  roleDescription = "slide",
   className
 }) {
   const box = useRef(null);
@@ -123,7 +124,7 @@ function SlideStage({
       className: cx("crewlet-slide-stage", `crewlet-slide-stage--${fit}`, className),
       style: boxStyle,
       role: "group",
-      "aria-roledescription": "slide",
+      "aria-roledescription": roleDescription,
       "aria-label": label,
       children: /* @__PURE__ */ jsx("div", { className: "crewlet-slide-stage__frame", style: frameStyle, children })
     }

package/dist/chunk-E6EWK5YY.js

@@ -0,0 +1,33 @@
+import { Toolbar } from './chunk-PGRPNDWM.js';
+import { ShortcutTip } from './chunk-OTN35CI4.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CanvasToolbar-AE5MXH7T.css';
+import { jsx } from 'react/jsx-runtime';
+
+function toolForKey(tools, event) {
+  if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return void 0;
+  const pressed = event.key.toLowerCase();
+  return tools.find((tool) => tool.shortcut.toLowerCase() === pressed)?.id;
+}
+function CanvasToolbar({
+  label,
+  tools,
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Toolbar, { label, className: cx("crewlet-canvas-toolbar", className), children: tools.map((tool) => /* @__PURE__ */ jsx(ShortcutTip, { label: tool.label, keys: [tool.shortcut], children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "md",
+      label: tool.label,
+      title: "",
+      icon: tool.icon,
+      pressed: tool.id === value,
+      onClick: () => onChange(tool.id)
+    }
+  ) }, tool.id)) });
+}
+
+export { CanvasToolbar, toolForKey };

package/dist/{chunk-OGAAHVF6.js → chunk-MBNFJSZS.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-O63MWA4G.js';
+import { SlideStage } from './chunk-E6CR5PEV.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';