@crewlethq/ui 0.31.1 → 0.32.0

package/README.md

@@ -54,7 +54,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
-| Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
+| Artifacts | `SandboxedFrame`, `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard` and `ArtifactKindGlyph`, `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it) |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
 | Presence | `PresenceStack`, `PresenceRing` and `presenceHueClass`, `CursorFlag`, `LiveCursor`, `FollowBanner`, `PeopleRail` (with `peopleRailKey`), and `PresenceModel` (the roster order, one entry per person, the session hues from `PRESENCE_HUES`, with no React in it) |
 | Presentations | `SlideStage` (a slide laid out at 1920 by 1080 and scaled to its box, with `SLIDE_WIDTH` and `SLIDE_HEIGHT`), `useSlideKeys` (the keys a show and a clicker send), `SlideFilmstrip`, `SlideGrid`, `SlideCompare` (with `SLIDE_COMPARE_LABELS`), `PresenterView` (with `formatStopwatch`) |
@@ -204,6 +204,26 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.32.0
+
+**A canvas title fits its box.** `CanvasBoard` sets a title note in a size fitted to its box both ways (three fifths of its height, smaller when its text would run past its width; `titleSize` is that rule on its own), and the text clips at the box where an unusually wide face still overruns it. A long heading used to run past its box over the boards beside it, at every zoom.
+
+**`SlideStage` names what it holds.** `roleDescription` replaces the screen reader's "slide" for a stage that holds something else, such as a design's board shown at its own layout ("artboard").
+
+**`CanvasBoard` works like a design tool.** A floating palette (`CanvasToolbar`) holds Move (`V`) and Hand (`H`, or Space held), and on an editable canvas with `onNoteCreate` also Text (`T`) and Sticky (`S`), which place a note where the field is clicked, open it for typing and hand back Move. Under Move a click selects a board or a note and a click on the field clears it; a double-click hands a live board's page the pointer (a single click used to), Escape gives it back and a second Escape clears the selection. What a press will do next ("Double-click to use this board", "Press Escape to return to the canvas") is said in the canvas's status note beside the zoom bar, no longer under the board. A board's edge is a one pixel hairline at every zoom, drawn outside the page so it no longer narrows it by two pixels; hover outlines a board in the accent (hovering its name does too) and selection outlines it thicker. A selected item shows four resize corners: the bottom right takes the arrow keys as the old corner did, and the other three are a pointer's extra reach. A note is dragged by its paper, retyped on a double-click and deleted with Delete while selected. The fit goes down to `CANVAS_BOARD_MIN_ZOOM` (0.02), so a design laid out across many full size boards is shown whole rather than clipped at a quarter. `toolbar={false}` leaves the palette out; its keys still work.
+
+What to change:
+
+- A caller that hands a board the pointer on a single click should expect a double-click now.
+- A caller with its own "add a note" controls passes `onNoteCreate(kind, at)` instead, adds the note at that canvas point and returns its id.
+- A sticky's paper and a title's box no longer clip, so their tools and corners show; their text clips instead.
+
+**`CanvasToolbar` is a canvas's tool palette.** Toggle buttons in a `Toolbar`, one pressed, each with a tip naming its key; `toolForKey` matches a press to a tool, for the surface that owns the keys.
+
+**`Canvas` takes a pointer, a fit floor and actual size.** `cursor` (`hand`, `pointer`, `crosshair` or `text`) picks the pointer the field shows, from drawn cursors (`CURSORS` in `@crewlethq/icons/glyphs`) with keyword fallbacks, and a pan always shows the closed hand. `minZoom` lowers the floor the fit stops at (`fitView` and `zoomLimits` take it as `floor`). Shift 0 shows actual size and Shift 1 fits, on every canvas; `controlsActualSize` adds a 1:1 control to the zoom bar. Each zoom control's tip names its key (`ShortcutTip`, for any control that has one). The handle adds `zoomTo(scale)` and `worldAt(clientPoint)`. With `refitOnResize` (on in `CanvasBoard`), a resize refits a view nobody has moved since its last fit, so a window made narrower no longer cuts the content off; a view the reader has panned or zoomed is kept, as before.
+
+**`@crewlethq/icons` draws pointer cursors.** `CURSORS` holds the pointer, hand, grabbing, crosshair and text cursors as complete CSS `cursor` values, generated from the vendored Lucide glyphs (`hand`, `hand-grab` and `text-cursor` are new, with `type`) in black over a white halo, as every platform draws its own pointer.
+
 ## Changes in 0.31.1
 
 **`EditingStatus` folds "Editing" on an artifact bar's narrow arrangement**, below 640px, and keeps its dot, so a phone's bar keeps the room for the title while Cancel and Save are there. The words stay in the status for a screen reader.

package/dist/Canvas/Canvas.d.ts

@@ -56,7 +56,13 @@
  * - FIT HAPPENS ONCE, on the first layout that has both a measured viewport
  *   and content bounds, and again only on request. A data push that changes
  *   the content never moves the operator's view, and nothing is shown before
- *   that first fit.
+ *   that first fit. With `refitOnResize`, a RESIZE refits a view nobody has
+ *   moved since its last fit: that view was the whole content, and a window
+ *   made narrower that kept the old zoom would cut the content off for a
+ *   reader who never asked to look at less of it. Once the reader has panned
+ *   or zoomed, a resize keeps their view and only keeps the content
+ *   reachable. It is opt in because a screen that chooses its own views
+ *   after a fit (a chart held at a legible zoom) decides its own refits.
  * - MOTION ONLY ON REQUEST. A fit, a zoom button or a reveal eases; a drag, a
  *   pinch, a wheel and a relayout anchor never do, and under reduced motion
  *   nothing does. An easing lasts as long as its transition: a clamp that
@@ -85,6 +91,8 @@ export interface CanvasHandle {
     fit(): void;
     /** Zoom about the viewport centre. */
     zoomBy(factor: number): void;
+    /** Zoom about the viewport centre to one scale, 1 being actual size, within the limits. */
+    zoomTo(scale: number): void;
     /** Pan the least distance that brings a world rectangle into view. */
     reveal(target: CanvasRect): void;
     /** Keep a node still on screen across a relayout: see `anchorView`. */
@@ -125,12 +133,28 @@ export interface CanvasHandle {
     restoreView(): void;
     /** A world rectangle in viewport coordinates, for positioning an overlay. */
     screenRect(target: CanvasRect): CanvasRect;
+    /**
+     * The world point under a point on the page, such as a click's
+     * `clientX` and `clientY`: where a tool that places something puts it.
+     */
+    worldAt(client: CanvasPoint): CanvasPoint;
 }
+/**
+ * The pointer the field shows while nothing is being dragged.
+ *
+ * `hand` says the field pans, which is what a chart moved by dragging it
+ * wants. A surface with tools names the one its tool means: `pointer` for
+ * selecting, `crosshair` for placing a thing, `text` for placing text. A pan
+ * in progress always shows the closed hand, whatever the tool.
+ */
+export type CanvasCursor = 'hand' | 'pointer' | 'crosshair' | 'text';
 /** Every string the canvas renders on its own. */
 export interface CanvasLabels {
     zoomIn: string;
     zoomOut: string;
     fit: string;
+    /** The control that shows the content at actual size. */
+    actualSize: string;
     /**
      * The zoom readout, given the zoom as a whole percentage. It is also what
      * opens the box a reader types one into, so it says both.
@@ -184,6 +208,12 @@ export interface CanvasProps {
      * acts on the canvas from 800px away is a control nobody finds.
      */
     controlsExtra?: ReactNode | undefined;
+    /**
+     * A control in the zoom bar that shows the content at actual size, which
+     * Shift 0 does whether or not it is drawn. For a canvas of pages, where a
+     * page at its own size is a view a reader asks for by name.
+     */
+    controlsActualSize?: boolean | undefined;
     /**
      * Bars of the caller's own, stacked under the control bar in the same
      * corner: a switch between two drawings of the content, a note about a key.
@@ -231,6 +261,22 @@ export interface CanvasProps {
      * is the page's own ground and nothing else.
      */
     ground?: CanvasGround | undefined;
+    /**
+     * The smallest zoom a fit may take: see [fitView]. [CANVAS_MIN_ZOOM] unless
+     * it is named, which suits a chart of cards; a canvas of pages names a
+     * lower one, so that a fit shows all of a design however wide it is laid.
+     */
+    minZoom?: number | undefined;
+    /** The pointer the field shows: see [CanvasCursor]. */
+    cursor?: CanvasCursor | undefined;
+    /**
+     * Refit on a resize while the view is still the last fit, rather than keep
+     * the zoom the old size was fitted at. For a surface whose fit is the view
+     * a reader expects back whatever the window does, such as a design's
+     * boards. Off by default: a screen that adjusts the view after each fit
+     * (holding a zoom, revealing a card) runs its own refit.
+     */
+    refitOnResize?: boolean | undefined;
     /**
      * Whether one finger can pan the canvas at all.
      *
@@ -257,4 +303,4 @@ export interface CanvasProps {
     ref?: Ref<CanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, ground, touch, labels, onReady, onViewChange, ref, className, }: CanvasProps): import("react").JSX.Element;
+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;

package/dist/Canvas/ShortcutTip.d.ts

@@ -0,0 +1,22 @@
+/**
+ * A control's tooltip that names its keyboard shortcut: "Zoom in" and the key
+ * that does it, drawn as keycaps.
+ *
+ * Every control on a canvas has a key, and a reader who has to hover each one
+ * to learn its key is a reader who is told it the moment it is useful. The tip
+ * describes the control rather than naming it (see Tooltip), so a screen reader
+ * hears the control's own name and then its shortcut, which the keycaps read
+ * aloud through Kbd's spoken form.
+ */
+import type { ReactElement } from 'react';
+import { type TooltipPlacement } from '../Tooltip/index.js';
+export interface ShortcutTipProps {
+    /** What the control does: the words the tooltip opens with. */
+    label: string;
+    /** The keys of the shortcut, in Kbd's names: `['Shift', '1']`, `['V']`. */
+    keys: readonly string[];
+    placement?: TooltipPlacement | undefined;
+    /** Exactly one element: the control. */
+    children: ReactElement;
+}
+export declare function ShortcutTip({ label, keys, placement, children }: ShortcutTipProps): import("react").JSX.Element;

package/dist/Canvas/geometry.d.ts

@@ -160,8 +160,10 @@ export declare const CANVAS_ZOOM_LIMITS: CanvasZoomLimits;
  * width in world units of the widest one, which the chart above this knows
  * because it measured every card; with none given the fixed ceiling stands. It
  * never goes below that fixed ceiling and never above [CANVAS_ZOOM_CEILING].
+ *
+ * `floor` is the fit's own floor, passed through to [fitView].
  */
-export declare function zoomLimits(content: CanvasRect | null, viewport: CanvasSize, largestItem?: number, padding?: number): CanvasZoomLimits;
+export declare function zoomLimits(content: CanvasRect | null, viewport: CanvasSize, largestItem?: number, padding?: number, floor?: number): CanvasZoomLimits;
 export declare function clampZoom(k: number, limits?: CanvasZoomLimits): number;
 /** Where a world point is drawn, in viewport coordinates. */
 export declare function toScreen(view: CanvasView, point: CanvasPoint): CanvasPoint;
@@ -177,8 +179,16 @@ export declare function zoomAt(view: CanvasView, factor: number, focus: CanvasPo
  * screen on each axis. A view that already satisfies it comes back unchanged.
  */
 export declare function clampPan(view: CanvasView, content: CanvasRect, viewport: CanvasSize, margin?: number): CanvasView;
-/** The view that shows all of `content`, centred, at no more than actual size. */
-export declare function fitView(content: CanvasRect, viewport: CanvasSize, padding?: number): CanvasView;
+/**
+ * The view that shows all of `content`, centred, at no more than actual size.
+ *
+ * `floor` is the smallest zoom the fit may take, [CANVAS_MIN_ZOOM] unless it
+ * is named. A chart of cards keeps that floor, because below it a card is a
+ * grey smudge and panning the overflow is the better view. A canvas of pages
+ * names a lower one: a design laid out across many 1440px boards is several
+ * screens wide, and a fit that stops at a quarter clips it on every side.
+ */
+export declare function fitView(content: CanvasRect, viewport: CanvasSize, padding?: number, floor?: number): CanvasView;
 /** The smallest pan that brings world rectangle `target` inside the padded viewport. */
 export declare function revealView(view: CanvasView, target: CanvasRect, viewport: CanvasSize, padding?: number): CanvasView;
 /**

package/dist/Canvas/index.d.ts

@@ -1,5 +1,7 @@
 import './Canvas.css';
 export { Canvas } from './Canvas.js';
-export type { CanvasGround, CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
+export type { CanvasCursor, CanvasGround, CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
+export { ShortcutTip } from './ShortcutTip.js';
+export type { ShortcutTipProps } from './ShortcutTip.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, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits, } from './geometry.js';
 export type { CanvasPoint, CanvasRect, CanvasSize, CanvasView, CanvasZoomLimits, PinchStart, WheelLike, } from './geometry.js';

package/dist/Canvas/index.js

@@ -1,5 +1,7 @@
-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, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OJ45PPCV.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, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../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/{Canvas-YVXHMWLN.css → Canvas-LRVNW7XN.css}

@@ -37,7 +37,7 @@
   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;
 }
@@ -55,8 +55,28 @@
   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;
 }
 
@@ -261,6 +281,22 @@
   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);

package/dist/CanvasBoard/CanvasBoard.d.ts

@@ -11,23 +11,40 @@
  * [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 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.
  */
 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 +58,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;
@@ -79,7 +107,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 +155,26 @@ 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;
     /** 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;
+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;

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 { 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 { 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,7 +1,11 @@
-export { CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_NOTE_COLORS, CanvasBoard, liveBoards } from '../chunk-JODJS7MR.js';
+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-OJ45PPCV.js';
+import '../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';