@crewlethq/ui 0.32.0 → 0.34.0

package/dist/Avatar/Avatar.d.ts

@@ -176,10 +176,12 @@ export declare const AVATAR_CHARACTER_FULL_DETAIL = 56;
 /**
  * Two uppercase initials, or one where the name has only one letter to give.
  *
- * SPLIT ON WHITESPACE, HYPHEN, UNDERSCORE AND DOT, because half the names this
- * draws are handles rather than names: `backend-engineer` gives BE,
- * `sre_lead` gives SL and `carlos.diaz` gives CD, where splitting on spaces
- * alone gives B, S and C and a roster of identical badges.
+ * SPLIT ON WHITESPACE, HYPHEN, UNDERSCORE, DOT AND COLON, because half the
+ * names this draws are handles rather than names: `backend-engineer` gives BE,
+ * `sre_lead` gives SL, `carlos.diaz` gives CD and `ci:release` CR, where
+ * splitting on spaces alone gives B, S, C and C and a roster of identical
+ * badges. PUNCTUATION AROUND A WORD IS NOT A LETTER: "review (API token)"
+ * gave R( where it gives RA.
  *
  * A SINGLE WORD STILL GIVES TWO LETTERS, because the seats an org chart names
  * in one word are the ones it draws most (CEO, SWE, PM, DevRel), and a badge

package/dist/Avatar/index.js

@@ -1,3 +1,3 @@
-export { AvatarStack, avatarStackLabel } from '../chunk-UAN5NE7M.js';
-export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-5OM447RW.js';
+export { AvatarStack, avatarStackLabel } from '../chunk-5AQBPHZD.js';
+export { AVATAR_CHARACTER_FULL_DETAIL, AVATAR_CORNER_RATIO, AVATAR_SIZES, AVATAR_STATUSES, AVATAR_STATUS_LABELS, Avatar, avatarCorner, avatarInitialsName, avatarPixels, avatarTint, getInitials } from '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,14 +1,14 @@
-export { AvatarPicker } from '../chunk-TGYDROIB.js';
-import '../chunk-LIXSV5YI.js';
-import '../chunk-BWRGFKJP.js';
+export { AvatarPicker } from '../chunk-EBCHVFCS.js';
+import '../chunk-GPHWCK7M.js';
+import '../chunk-K3IJQNB7.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-HVIX5ECM.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+import '../chunk-YEVG2X5R.js';
+import '../chunk-CCAXYHQS.js';
+import '../chunk-VL6CUNSX.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Callout/index.js

@@ -1,2 +1,2 @@
-export { Callout } from '../chunk-SVSCLHHI.js';
+export { Callout } from '../chunk-SZZRIHGT.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Callout-SXXK4B5R.css → Callout-ZAVG3P66.css}

@@ -22,8 +22,15 @@
    */
   --crewlet-callout-line: transparent;
 
-  display: flex;
-  align-items: flex-start;
+  /* THE GLYPH, THE TEXT, AND AN ACTION'S COLUMN only where there is one: the
+     third track is implicit, so a callout without an action keeps no gap
+     for it at its end. A grid rather than a row, so a narrow callout can put
+     its action under the text, in the text's own column, whatever the glyph
+     is. */
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-auto-columns: auto;
+  align-items: start;
   gap: var(--spacing-2);
   /* The engine's own: a tight strip rather than a padded card. This sits
      above a screen or between two sections and takes a line or two of text,
@@ -38,17 +45,29 @@
   line-height: var(--font-line-height-normal);
 }
 
+/*
+ * WITH AN ACTION, ONE LINE OF TEXT CENTRES ON THE BUTTON. The row is the
+ * button's height and the text sat at its top, three pixels above the
+ * button's label. The content is padded by half of what the control is
+ * taller than a line, and the icon moved down with it, so a one-line callout
+ * reads as one line and a longer one keeps its icon on its first line.
+ */
+.crewlet-callout:has(> .crewlet-callout__action) {
+  --crewlet-callout-lead: max(0px, calc((var(--size-control-sm) - 1lh) / 2));
+  /* Measured by its own width, so the action can move under the text. */
+  container: crewlet-callout / inline-size;
+}
+
 .crewlet-callout__icon {
   display: inline-flex;
-  flex: none;
   /* On the first line's optical centre rather than its box top, which a 16px
      glyph beside a 13px line sits two pixels above. */
-  margin-top: 2px;
+  margin-top: calc(2px + var(--crewlet-callout-lead, 0px));
 }
 
 .crewlet-callout__content {
   min-width: 0;
-  flex: 1;
+  padding-block: var(--crewlet-callout-lead, 0px);
 }
 
 .crewlet-callout__title {
@@ -59,10 +78,31 @@
 }
 
 .crewlet-callout__action {
-  flex: none;
+  grid-column: 3;
+  grid-row: 1;
   align-self: center;
 }
 
+/*
+ * A NARROW CALLOUT PUTS ITS ACTION UNDER THE TEXT, at the start of the text's
+ * column, so the sentence keeps the callout's whole measure. Beside it, a
+ * phone's width left the message a column of a word or two a line. The text
+ * no longer centres on a button beside it, so it sits at its own top.
+ */
+@container crewlet-callout (width < 28rem) {
+  .crewlet-callout__icon,
+  .crewlet-callout__content {
+    --crewlet-callout-lead: 0px;
+  }
+
+  .crewlet-callout__action {
+    grid-column: 2;
+    grid-row: 2;
+    justify-self: start;
+    align-self: start;
+  }
+}
+
 /*
  * Inline code inside a callout takes the callout's ink. A mono chip that kept
  * its own neutral ink inside a danger banner read as the one part of the

package/dist/Canvas/Canvas.d.ts

@@ -169,9 +169,10 @@ export interface CanvasLabels {
 }
 /**
  * What the field under the content is drawn as. `plain` is the page's own
- * ground; `dotted` lays a grid of dots on it. See [CanvasProps.ground].
+ * ground; `dotted` lays a grid of dots on the frame, and `grid` lays one on
+ * the content's own plane. See [CanvasProps.ground].
  */
-export type CanvasGround = 'plain' | 'dotted';
+export type CanvasGround = 'plain' | 'dotted' | 'grid';
 export interface CanvasProps {
     /** The accessible name of the viewport, such as "Organization chart". */
     label: string;
@@ -259,6 +260,13 @@ export interface CanvasProps {
      * anybody drags it. They are drawn on the frame rather than on the content,
      * so they stay put while the content moves over them. `plain`, the default,
      * is the page's own ground and nothing else.
+     *
+     * `grid` is a design tool's ground: the same dots laid on the content's own
+     * plane, so they pan with it and their pitch follows the zoom (see
+     * [gridOf]). For a canvas of things a person places and arranges, where the
+     * grid is the surface they are placed ON rather than a texture behind a
+     * chart, and a grid that stayed put while the boards moved over it would
+     * read as two planes sliding apart.
      */
     ground?: CanvasGround | undefined;
     /**
@@ -304,3 +312,26 @@ export interface CanvasProps {
     className?: string | undefined;
 }
 export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsActualSize, controlsBelow, hint, largestItemWidth, dimmed, ground, minZoom, cursor, refitOnResize, touch, labels, onReady, onViewChange, ref, className, }: CanvasProps): import("react").JSX.Element;
+/**
+ * Every pointer cursor, as custom properties on the canvas's root: the field
+ * reads the one its [CanvasCursor] names, and content inside the canvas (a
+ * board's shield, a resize handle's neighbours) reads the same drawings
+ * rather than the browser's own, so one pointer family runs across the whole
+ * surface. Each falls back to its keyword where it is read.
+ */
+/**
+ * WHERE A `grid` GROUND'S DOTS FALL for a view: their pitch on screen as a
+ * multiple of the dotted step, and the screen point one of them sits on.
+ *
+ * The world's pitch doubles or halves with the zoom so the screen pitch stays
+ * between one and two steps, as a design tool's grid does: at every zoom the
+ * dots are as dense as the dotted ground's and never twice as sparse, and one
+ * of them always sits on the content's origin, so the grid and the content
+ * never slide apart. The offset is the view's own translation, since the
+ * background repeats from it both ways.
+ */
+export declare function gridOf(view: CanvasView): {
+    scale: number;
+    x: number;
+    y: number;
+};

package/dist/Canvas/index.d.ts

@@ -1,5 +1,5 @@
 import './Canvas.css';
-export { Canvas } from './Canvas.js';
+export { Canvas, gridOf } from './Canvas.js';
 export type { CanvasCursor, CanvasGround, CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
 export { ShortcutTip } from './ShortcutTip.js';
 export type { ShortcutTipProps } from './ShortcutTip.js';

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OTN35CI4.js';
-import '../chunk-VYOKRN2I.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-3P4Y5RX6.js';
+import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{Canvas-LRVNW7XN.css → Canvas-VUG2HLZK.css}

@@ -33,6 +33,19 @@
   background-size: var(--spacing-5) var(--spacing-5);
 }
 
+/*
+ * A GRID ON THE CONTENT'S PLANE (`ground="grid"`): the same dots, but pitched
+ * and placed by the view (`gridOf`), so they pan and zoom with the content.
+ * The dots themselves stay one screen pixel, as a design tool's do.
+ */
+.crewlet-canvas[data-ground='grid'] {
+  background-image: radial-gradient(var(--color-border-strong) 1px, transparent 1.2px);
+  background-size:
+    calc(var(--spacing-5) * var(--crewlet-canvas-grid-scale, 1))
+    calc(var(--spacing-5) * var(--crewlet-canvas-grid-scale, 1));
+  background-position: var(--crewlet-canvas-grid-x, 0) var(--crewlet-canvas-grid-y, 0);
+}
+
 .crewlet-canvas__viewport {
   position: absolute;
   inset: 0;
@@ -239,6 +252,16 @@
   display: none;
 }
 
+/*
+ * THE NOTE GROWS AWAY FROM THE CORNER. It comes and goes as the canvas's state
+ * does, and drawn on the corner's side of the zoom bar it would push the bar
+ * out from under a pointer on its way to it; so in a bottom corner it is drawn
+ * above the bar, and the bar never moves.
+ */
+.crewlet-canvas__controls:not([data-placement='top-right']) .crewlet-canvas__hint {
+  order: -1;
+}
+
 /*
  * THE ZOOM READOUT, between the two steppers. It says where the view stands,
  * which two chevrons never do, and it is the way to a number without pressing a

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -36,12 +36,18 @@
  *
  * 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.
+ * 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, 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.
+ * 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, type CanvasPoint } from '../Canvas/index.js';
@@ -80,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;
@@ -167,6 +178,14 @@ export interface CanvasBoardProps {
     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. */
@@ -177,4 +196,20 @@ export interface CanvasBoardProps {
     canvasRef?: Ref<CanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function CanvasBoard({ label, boards, notes, renderBoard, maxLive, minLiveWidth, editable, minSide, maxSide, onBoardChange, onNoteChange, onNoteRemove, onNoteCreate, onOpen, onActivate, controlsExtra, toolbar, 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_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, TITLE_GLYPH_EM, titleSize } from './CanvasBoard.js';
-export type { CanvasBoardItem, CanvasBoardLabels, CanvasBoardNote, CanvasBoardProps, CanvasBoardRect, CanvasBoardTool, 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,12 +1,12 @@
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, liveBoards, titleSize } from '../chunk-PJD2KFHX.js';
-import '../chunk-CJKMURZO.js';
-import '../chunk-E6EWK5YY.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-WPX6A5BV.js';
+import '../chunk-5SZGKSGL.js';
+import '../chunk-3Y56GQPM.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-OTN35CI4.js';
-import '../chunk-VYOKRN2I.js';
+import '../chunk-3P4Y5RX6.js';
+import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{CanvasBoard-MBZVBWDO.css → CanvasBoard-5NNSKY6A.css}

@@ -5,7 +5,12 @@
  * 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;
 }
@@ -27,6 +32,10 @@
 
 /* ---- 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);
@@ -35,6 +44,20 @@
   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 {
@@ -97,7 +120,7 @@
   cursor: var(--crewlet-canvas-cursor-pointer, default);
 }
 
-/* A board that is not running draws its title and size at screen size. */
+/* A board that is not running draws its size, and why, at screen size. */
 .crewlet-canvas-board__placeholder {
   position: absolute;
   inset: 0;
@@ -111,25 +134,59 @@
   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. */
+/*
+ * 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-title {
+.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-size: var(--font-size-sm);
   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%;
@@ -139,11 +196,42 @@
   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;
@@ -151,6 +239,7 @@
   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);
@@ -166,7 +255,7 @@
   margin: 0;
   padding: var(--spacing-1) var(--spacing-2);
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md);
   background: transparent;
   font: inherit;
   cursor: var(--crewlet-canvas-cursor-pointer, default);
@@ -178,6 +267,21 @@
   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 {
@@ -333,6 +437,23 @@
   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);

package/dist/CanvasToolbar/index.js

@@ -1,10 +1,10 @@
-export { CanvasToolbar, toolForKey } from '../chunk-E6EWK5YY.js';
+export { CanvasToolbar, toolForKey } from '../chunk-3Y56GQPM.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-OTN35CI4.js';
-import '../chunk-VYOKRN2I.js';
+import '../chunk-3P4Y5RX6.js';
+import '../chunk-LM3ISVJA.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';

package/dist/{CanvasToolbar-AE5MXH7T.css → CanvasToolbar-EM5EVZED.css}

@@ -1,5 +1,7 @@
 /*
- * A canvas's tool palette (CanvasToolbar.tsx): the zoom bar's glass surface,
+ * A canvas's tool palette (CanvasToolbar.tsx): the zoom bar's glass surface
+ * and its control step (the small one, which every toolbar and panel control
+ * takes), so the two bars stand the same height on the field's foot,
  * 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.
@@ -14,7 +16,7 @@
   backdrop-filter: blur(var(--blur-sm));
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
+  box-shadow: var(--shadow-xs);
 }
 
 .crewlet-canvas-toolbar .crewlet-icon-btn {

package/dist/ChangeMark/index.js

@@ -1,8 +1,8 @@
-export { ChangeMark } from '../chunk-YEKYVJQR.js';
-import '../chunk-NHBP2XS5.js';
+export { ChangeMark } from '../chunk-SGHIAGPR.js';
+import '../chunk-VI5FWDZW.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-QWOPX2MN.js';
-import '../chunk-HMPFGIWM.js';
+import '../chunk-6ZJ3N7QI.js';
+import '../chunk-OMV5W53A.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-HVIX5ECM.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-YEVG2X5R.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-5OM447RW.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';