@crewlethq/ui 0.31.1 → 0.33.0

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -11,23 +11,46 @@
  * [CANVAS_BOARD_MAX_LIVE] at once; every other board draws as a placeholder of
  * its size, so a canvas of sixty boards runs a dozen pages, not sixty.
  *
+ * TOOLS, AS A DESIGN TOOL HAS THEM (CanvasToolbar). Move (`V`) selects: a
+ * click on a board or a note selects it, a click on the field clears it, and
+ * the pointer is the arrow. Hand (`H`, or Space held) pans whatever is under
+ * the pointer, boards included, with the open hand. An editable canvas that
+ * can create notes adds Text (`T`) and Sticky (`S`): a click on the field
+ * places one there, opens it for typing, and hands back the Move tool. The
+ * pointer is always the tool's (the Canvas cursors), and a pan in progress is
+ * always the closed hand.
+ *
  * A PAGE INSIDE A BOARD NEVER TAKES THE CANVAS'S POINTER BY SURPRISE. A live
  * board is covered by a shield that pans the canvas like the field around it;
- * a click (not a drag) on it activates that board, and only then does the page
- * receive the pointer. Escape gives the pointer back to the canvas.
+ * a click on it selects the board, a double-click activates it, and only then
+ * does the page receive the pointer. Escape gives the pointer back to the
+ * canvas, and a second Escape clears the selection.
+ *
+ * EDITING (`editable`). A board's name becomes its move handle and a selected
+ * item's corners its resize handles, by pointer or, on the bottom right
+ * corner, by the arrow keys (Shift for a larger step); a note is moved by its
+ * own paper or its handle, retyped on a double-click, and deleted with Delete
+ * while selected. Each finished gesture is reported once, with whole canvas
+ * pixels, and the caller decides what a change is (for a design, a new
+ * version of its canvas).
  *
- * EDITING (`editable`). A board's title bar becomes its move handle and a
- * corner its resize handle, by pointer or by the arrow keys (Shift for a larger
- * step); a note gains the same handles, and its text is edited in place. Each
- * finished gesture is reported once, with whole canvas pixels, and the caller
- * decides what a change is (for a design, a new version of its canvas).
+ * HOVER AND SELECTION ARE OUTLINES IN THE ACCENT, at one screen pixel and two,
+ * over a board's own hairline edge; hovering a board's name outlines its board,
+ * because the name is how a reader picks a board out of a crowded canvas. The
+ * selection is the component's own unless the caller holds it (`selected`
+ * with `onSelectedChange`), which is how a list of boards beside the canvas
+ * marks the board picked on it and picks one there.
  *
- * THE CHROME STAYS ONE SIZE ON SCREEN. Titles and handles are counter-scaled
- * by the zoom, so a board's label is readable and its handle is a full pointer
- * target whatever the zoom, while the board itself scales with the canvas.
+ * THE CHROME STAYS ONE SIZE ON SCREEN. Titles, edges, outlines and handles
+ * are counter-scaled by the zoom, so a board's label is readable, its edge is
+ * a hairline and its handle is a full pointer target whatever the zoom, while
+ * the board itself scales with the canvas. What a board says is held to the
+ * room it is drawn in (`boardRoom`): a name too narrow to read is not drawn,
+ * and a placeholder drops the lines it has no room for rather than spill them
+ * over the boards beside it.
  */
 import { type ReactNode, type Ref } from 'react';
-import { type CanvasHandle, type CanvasLabels } from '../Canvas/index.js';
+import { type CanvasHandle, type CanvasLabels, type CanvasPoint } from '../Canvas/index.js';
 /** An artboard: an id, its frame in canvas pixels and its title. */
 export interface CanvasBoardItem {
     id: string;
@@ -41,6 +64,17 @@ export interface CanvasBoardItem {
 export type CanvasNoteColor = 'yellow' | 'pink' | 'blue' | 'green' | 'purple';
 /** Every sticky colour, the first being a sticky's default. */
 export declare const CANVAS_NOTE_COLORS: readonly ["yellow", "pink", "blue", "green", "purple"];
+/**
+ * The type size a title is set in, in canvas pixels: as large as its box's
+ * height allows (three fifths of it), and no larger than lets its text run
+ * the box's width on one line, measured at an average glyph of
+ * [TITLE_GLYPH_EM] of the size. A long title is set smaller rather than run
+ * past its box over the boards beside it; the box clips whatever an unusually
+ * wide face still overruns.
+ */
+export declare function titleSize(note: Pick<CanvasBoardNote, 'w' | 'h' | 'text'>): number;
+/** The average advance of a title's glyph, as a share of its size. */
+export declare const TITLE_GLYPH_EM = 0.58;
 /** A note: a title over a group of boards, or a sticky beside them. */
 export interface CanvasBoardNote {
     id: string;
@@ -52,6 +86,11 @@ export interface CanvasBoardNote {
     text: string;
     color?: CanvasNoteColor | undefined;
 }
+/** What is selected on a board canvas: one board or one note. */
+export interface CanvasBoardSelection {
+    kind: 'board' | 'note';
+    id: string;
+}
 /** A frame as an edit reports it. */
 export interface CanvasBoardRect {
     x: number;
@@ -79,7 +118,32 @@ export interface CanvasBoardLabels {
     paused: string;
     /** Said by an active board, so a reader knows how to give the pointer back. */
     active: string;
+    /** Said by a selected live board, so a reader knows how to use its page. */
+    interact: string;
+    /** The tool palette's name. */
+    tools: string;
+    /** Each tool's name. */
+    moveTool: string;
+    handTool: string;
+    textTool: string;
+    stickyTool: string;
 }
+/**
+ * The tools a board canvas offers. Move and Hand always; Text and Sticky only
+ * where a person may edit and the caller places notes (`onNoteCreate`).
+ *
+ * NO FRAME TOOL. A board is a page an agent or an upload made, with a file
+ * behind it, and an empty frame drawn here would be a board with nothing to
+ * render. NO COMMENT TOOL until a canvas has comments to anchor.
+ */
+export type CanvasBoardTool = 'move' | 'hand' | 'text' | 'sticky';
+/**
+ * The smallest zoom a board canvas fits at. A design laid out across many
+ * full-size pages is many screens wide, and every board has to be on screen
+ * at the fit, so the floor is far below a chart's; the visibility budget is
+ * what keeps a canvas this far out cheap.
+ */
+export declare const CANVAS_BOARD_MIN_ZOOM = 0.02;
 export interface CanvasBoardProps {
     /** The accessible name of the canvas, such as "Launch landing page". */
     label: string;
@@ -102,16 +166,50 @@ export interface CanvasBoardProps {
     onNoteChange?: ((note: CanvasBoardNote) => void) | undefined;
     /** A note was deleted. */
     onNoteRemove?: ((id: string) => void) | undefined;
+    /**
+     * The Text or Sticky tool placed a note at a canvas point (its top left, in
+     * canvas pixels). The caller adds the note, with whatever size and starting
+     * text it gives new notes, and returns its id, which the canvas then opens
+     * for typing. Absent, or on a canvas that is not editable, neither tool is
+     * offered.
+     */
+    onNoteCreate?: ((kind: CanvasBoardNote['kind'], at: CanvasPoint) => string | undefined) | undefined;
     /** The control that opens one board full size; absent, there is none. */
     onOpen?: ((id: string) => void) | undefined;
     /** The board that holds the pointer changed; null is the canvas itself. */
     onActivate?: ((id: string | null) => void) | undefined;
+    /**
+     * The selected board or note, for a caller that holds it (a list of boards
+     * that marks the one picked on the canvas). Left out, the canvas keeps its
+     * own; null is nothing selected.
+     */
+    selected?: CanvasBoardSelection | null | undefined;
+    /** The selection changed, by a press on the canvas or by Escape. */
+    onSelectedChange?: ((selection: CanvasBoardSelection | null) => void) | undefined;
     /** Anything else in the canvas's control bar. */
     controlsExtra?: ReactNode | undefined;
+    /** The floating tool palette. On by default; the keys work either way. */
+    toolbar?: boolean | undefined;
     labels?: Partial<CanvasBoardLabels> | undefined;
     canvasLabels?: Partial<CanvasLabels> | undefined;
     /** The canvas underneath, for a caller that reveals or fits a board. */
     canvasRef?: Ref<CanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onOpen, onActivate, controlsExtra, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;
+/**
+ * WHAT A BOARD HAS ROOM TO SAY, from its size on screen.
+ *
+ * `title` is whether its name is drawn above it: a name narrower than a few
+ * letters reads as a stray mark, so a board drawn narrower than
+ * [BOARD_TITLE_MIN_WIDTH] goes unnamed until it is zoomed into. `lines` is how
+ * many of a placeholder's two lines (its size, then why it is not running) fit
+ * inside it at the chrome's own type, so the lines it has no room for are left
+ * out rather than clipped at both ends.
+ */
+export declare function boardRoom(width: number, height: number): {
+    title: boolean;
+    lines: 0 | 1 | 2;
+};
+/** The narrowest a board is drawn, in screen pixels, with its name above it. */
+export declare const BOARD_TITLE_MIN_WIDTH = 40;
+export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onOpen, onActivate, selected: heldSelection, onSelectedChange, controlsExtra, toolbar, labels, canvasLabels, canvasRef, className, }: CanvasBoardProps): import("react").JSX.Element;

package/dist/CanvasBoard/budget.d.ts

@@ -26,10 +26,16 @@ export interface BoardFrame {
  */
 export declare const CANVAS_BOARD_MAX_LIVE = 12;
 /**
- * The narrowest a board may be drawn, in screen pixels, and still be live:
- * below it a page's text is unreadable, so running it buys nothing.
+ * The narrowest a board may be drawn, in screen pixels, and still be live.
+ *
+ * Below it a page is a smear, so running it buys nothing. Above it the page's
+ * text may be too small to read, but its layout and colour are not, and they
+ * are how a reader tells one board of a design from the next: a canvas
+ * fitted on a phone or zoomed out over a dozen boards draws them a hundred or
+ * so pixels wide, and at a wider floor every one of them was a grey box. The
+ * cost of running more is held by [CANVAS_BOARD_MAX_LIVE], not by this.
  */
-export declare const CANVAS_BOARD_MIN_LIVE_WIDTH = 160;
+export declare const CANVAS_BOARD_MIN_LIVE_WIDTH = 96;
 /**
  * The boards to frame for a view: those on screen and at least `minWidth`
  * pixels wide there, the most visible area first, at most `max` of them,

package/dist/CanvasBoard/index.d.ts

@@ -1,5 +1,5 @@
 import './CanvasBoard.css';
-export { CanvasBoard, CANVAS_NOTE_COLORS } from './CanvasBoard.js';
-export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasNoteColor, } from './CanvasBoard.js';
+export { BOARD_TITLE_MIN_WIDTH, CanvasBoard, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, boardRoom, titleSize, } from './CanvasBoard.js';
+export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasBoardSelection, CanvasBoardTool, CanvasNoteColor, } from './CanvasBoard.js';
 export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, liveBoards } from './budget.js';
 export type { BoardFrame } from './budget.js';

package/dist/CanvasBoard/index.js

@@ -1,8 +1,12 @@
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards } from '../chunk-JODJS7MR.js';
-import '../chunk-CJKMURZO.js';
-import '../chunk-OJ45PPCV.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-HMPFGIWM.js';
+export { BOARD_TITLE_MIN_WIDTH, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardRoom, liveBoards, titleSize } from '../chunk-MDNVHIB2.js';
+import '../chunk-5SZGKSGL.js';
+import '../chunk-GLSOD5Z4.js';
+import '../chunk-PGRPNDWM.js';
+import '../chunk-22UEIXZE.js';
+import '../chunk-LM3ISVJA.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-5FYPE5GL.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/CanvasBoard-5NNSKY6A.css

@@ -0,0 +1,462 @@
+/*
+ * 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.
+ */
+
+/*
+ * A SIZE CONTAINER BY ITS WIDTH, so the palette can tell a canvas too narrow
+ * to hold it beside the zoom bar on one line (see below).
+ */
+.crewlet-canvas-board {
+  container: crewlet-canvas-board / inline-size;
+  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;
+}
+
+/*
+ * 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 ----------------- */
+
+/*
+ * CENTRED AT THE FOOT, on the zoom bar's line: the two bars are one control
+ * step tall and stand the same inset from the field's edge.
+ */
+.crewlet-canvas-board__tools {
+  position: absolute;
+  bottom: var(--spacing-3);
+  left: 50%;
+  z-index: var(--z-index-raised);
+  transform: translateX(-50%);
+}
+
+/*
+ * A NARROW CANVAS (a phone, a split pane) has no room at its foot for the
+ * palette between the zoom bar and the edge, so the palette moves to the top
+ * left corner, which the zoom bar never takes.
+ */
+@container crewlet-canvas-board (width < 36rem) {
+  .crewlet-canvas-board__tools {
+    top: var(--spacing-3);
+    bottom: auto;
+    left: var(--spacing-3);
+    transform: none;
+  }
+}
+
+/* ---- a board ------------------------------------------------------------ */
+
+.crewlet-canvas-board__board {
+  position: absolute;
+  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);
+  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. */
+.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: var(--crewlet-canvas-cursor-pointer, default);
+}
+
+/* A board that is not running draws its size, and why, 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. It is held to
+ * the board's width ON SCREEN (the board's own width times the zoom, less a
+ * margin each side), so a line the component judged to fit never runs past
+ * the board's edges into the boards beside it.
+ */
+.crewlet-canvas-board__placeholder-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1);
+  flex: none;
+  box-sizing: border-box;
+  max-width: calc(100% * var(--crewlet-canvas-board-zoom));
+  padding-inline: var(--spacing-2);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.crewlet-canvas-board__placeholder-text > * {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-canvas-board__placeholder-size {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- chrome, at screen size --------------------------------------------- */
+
+/*
+ * THE CHROME IS DRAWN OVER THE CONTENT, every board's and note's over every
+ * board and note, as a design tool draws its frame names. It is counter-scaled
+ * to one size on screen while the content shrinks with the zoom, so far out a
+ * name reaches over the note or board above it; drawn in document order it
+ * went under a note laid out after its board, and that note took every press
+ * meant for the name and the open control.
+ */
+.crewlet-canvas-board__chrome,
+.crewlet-canvas-board__note-tools,
+.crewlet-canvas-board__resize {
+  z-index: 1;
+}
+
+/*
+ * ONE LINE OF TYPE TALL, whatever sits in it: the open control is centred on
+ * the line and allowed past it, so a row of boards zoomed far out loses only
+ * a title's height to the names above it rather than a button's.
+ */
+.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));
+  height: calc(var(--font-size-xs) * var(--font-line-height-normal) + var(--spacing-1));
+  padding-bottom: var(--spacing-1);
+  transform: scale(var(--crewlet-canvas-board-unzoom));
+  transform-origin: bottom left;
+}
+
+/* A board drawn too narrow to name goes unnamed (`boardRoom`). */
+.crewlet-canvas-board__board[data-untitled] > .crewlet-canvas-board__chrome {
+  display: none;
+}
+
+.crewlet-canvas-board__open {
+  flex: none;
+}
+
+/*
+ * THE OPEN CONTROL IS THE BOARD'S, NOT THE CANVAS'S: where a pointer can
+ * hover, it is drawn on the board under it, the selected board and the
+ * control that has focus, so a canvas at rest shows its names and nothing
+ * else. A touch screen has no hover to find it by, so it is always drawn
+ * there.
+ */
+@media (hover: hover) {
+  /*
+   * HIDDEN, IT TAKES NO ROOM: out of the row rather than only transparent, so
+   * a narrow board's name has the whole width to itself at rest instead of
+   * being cut to its first letter beside an empty slot. It still takes focus,
+   * and is put back in the row when it has it.
+   */
+  .crewlet-canvas-board__board:not(:hover, [data-selected]) .crewlet-canvas-board__open:not(:focus-visible) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+/* 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-tertiary);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  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 {
+  appearance: none;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  font: inherit;
+  cursor: var(--crewlet-canvas-cursor-pointer, default);
+  touch-action: none;
+}
+
+.crewlet-canvas-board__handle:hover {
+  background: var(--color-surface-hover);
+  border-color: var(--color-border-default);
+}
+
+/*
+ * A NAME THAT IS ALSO A MOVE HANDLE keeps the name's type and its place: the
+ * handle's padding and edge are taken back by a margin the same size, so the
+ * letters stay on the board's left edge and the title's line, and only the
+ * hover's box reaches past them.
+ */
+.crewlet-canvas-board__title.crewlet-canvas-board__handle {
+  flex: 0 1 auto;
+  margin-block: calc(-1 * (var(--spacing-1) + 1px));
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+}
+
+/* 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);
+}
+
+/*
+ * 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;
+  display: grid;
+  place-items: center;
+  width: var(--spacing-6);
+  height: var(--spacing-6);
+  margin: 0;
+  padding: 0;
+  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;
+  transform: translate(-50%, -50%) scale(var(--crewlet-canvas-board-unzoom));
+}
+
+.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;
+  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 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'] {
+  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 {
+  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);
+  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;
+}
+
+/*
+ * A NOTE'S TOOLS ARE THE NOTE'S, as a board's open control is the board's:
+ * where a pointer can hover they are drawn on the note under it, the selected
+ * note and the note holding focus, rather than over every note at once.
+ */
+@media (hover: hover) {
+  .crewlet-canvas-board__note-tools {
+    opacity: 0;
+  }
+
+  .crewlet-canvas-board__note:hover .crewlet-canvas-board__note-tools,
+  .crewlet-canvas-board__note[data-selected] .crewlet-canvas-board__note-tools,
+  .crewlet-canvas-board__note:focus-within .crewlet-canvas-board__note-tools {
+    opacity: 1;
+  }
+}
+
+.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);
+}