@crewlethq/ui 0.31.1 → 0.33.0

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -1,6 +1,10 @@
 import { type ReactNode, type Ref } from 'react';
-/** How wide a panel rests beside the artifact: facts, a list, or a table. */
-export type ArtifactPanelSize = 'sm' | 'md' | 'lg';
+/**
+ * How wide a panel rests beside the artifact: text (facts, a list, a form) or
+ * a table. ONE WIDTH FOR TEXT, so moving from one text panel to another never
+ * moves the artifact's edge under the reader.
+ */
+export type ArtifactPanelSize = 'md' | 'lg';
 export interface ArtifactPanelLabels {
     close: (title: string) => string;
     expand: string;

package/dist/ArtifactPanel/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-I3BSQUKN.js';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-HUVG2FFT.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArtifactPanel-YFXT5O77.css → ArtifactPanel-HW3SU7CP.css}

@@ -28,7 +28,9 @@
 }
 
 .crewlet-artifact-panel {
-  --crewlet-artifact-panel-width: 25rem;
+  /* THE TEXT WIDTH, every panel of facts, a list or a form: three widths for
+     those moved the artifact's edge 80px between Details and History. */
+  --crewlet-artifact-panel-width: 22.5rem;
   display: flex;
   flex: none;
   flex-direction: column;
@@ -38,10 +40,6 @@
   background: var(--color-surface-background);
 }
 
-.crewlet-artifact-panel--sm {
-  --crewlet-artifact-panel-width: 20rem;
-}
-
 .crewlet-artifact-panel--lg {
   --crewlet-artifact-panel-width: 36rem;
 }
@@ -94,10 +92,27 @@
   gap: var(--spacing-1);
 }
 
+/* THE BODY'S INSET IS PUBLISHED (--crewlet-artifact-panel-inset) for content
+   that sticks to its scrollport: a sticky edge stops at the padding, so a
+   foot with `bottom: 0` left a band under it that the content scrolled
+   through; such a foot offsets itself by the inset to sit on the edge. */
 .crewlet-artifact-panel__body {
+  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
+     rather than the window's; and its sections head at the panel title's
+     step, a level under it and never louder than it. */
+  container: crewlet-artifact-panel / inline-size;
+  --crewlet-section-title-size: var(--font-size-sm);
+  --crewlet-artifact-panel-inset: var(--spacing-4);
+
+  /* A COLUMN, so content that should fit the panel rather than scroll it
+     can: a child that sets `min-height: 0` shrinks to the room the body has
+     (a sheet's rows, whose grid then scrolls itself), and every other child
+     keeps its content's height and scrolls the body as before. */
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
-  padding: var(--spacing-4);
+  padding: var(--crewlet-artifact-panel-inset);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -111,7 +126,10 @@
     inset-inline-end: 0;
     z-index: var(--z-index-overlay);
     width: min(var(--crewlet-artifact-panel-width), 100%);
-    box-shadow: var(--shadow-lg);
+    /* THE DRAWER'S LIFT, the shell's own rail drawer's: the large step falls
+       below a box and left the panel's start edge reading as a cut through
+       the artifact rather than a sheet over it. */
+    box-shadow: var(--shadow-xl);
   }
 
   .crewlet-artifact-panel[data-expanded] {

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

@@ -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.
@@ -145,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;
@@ -184,6 +209,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.
@@ -229,8 +260,31 @@ 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;
+    /**
+     * 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 +311,27 @@ 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;
+/**
+ * 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/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 { 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';
 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,6 +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, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OJ45PPCV.js';
-import '../chunk-VYOKRN2I.js';
-import '../chunk-HMPFGIWM.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-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/{Canvas-YVXHMWLN.css → Canvas-VUG2HLZK.css}

@@ -33,11 +33,24 @@
   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;
   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 +68,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;
 }
 
@@ -219,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
@@ -261,6 +304,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);